Reactjs неожиданный бесконечный цикл с рендером

Question

Reactjs неожиданный бесконечный цикл с рендером

5

Я использую React для реализованного компонента Include. Он загружает контент из url. Этот тест работает, но также создает неожиданный бесконечный цикл с рендерингом... почему?

<script type="text/jsx">
  /** @jsx React.DOM */
  var Include = React.createClass({
    getInitialState: function() {
      return {content: 'loading...'};
    },
    render: function() {
      var url = this.props.src;
      $.ajax({
        url: url,
        success: function(data) {
          this.setState({content: data});
        }.bind(this)
      });
      return <div>{this.state.content + new Date().getTime()}</div>;
    }
  });

  var Hello = React.createClass({
    render: function() {
        return <Include src="hello.txt" />;
    }
  });
  React.renderComponent(
    <Hello />,
    document.getElementById('hello')
  );
</script>

Rulo Kobashikawa 19 июль 2014, в 19:29

Источник

Теги:

javascript

reactjs

ajax

2 ответа

Ещё вопросы

FakeRainBrigand · Answer 1 · 2014-07-20T04-14-00.000Z

Это более надежный компонент Include. Различия,

рендер должен быть чистым (не может делать ajax там)
getInitialState должен быть чистым
если опорный сигнал является динамическим, например. <Include url={this.state.x} />, он должен обновить

var Include = React.createClass({
  getInitialState: function() {
    return {content: 'loading...'};
  },
  componentDidMount: function(){ 
    this.updateAJAX(this.props.url); 
  },
  componentWillReceiveProps: function(nextProps){
    // see if it actually changed
    if (nextProps.url !== this.props.url) {
      // show loading again
      this.setState(this.getInitialState);

      this.updateAJAX(nextProps.url);
    }
  },
  updateAJAX: function(url){
    $.ajax({
      url: url,
      success: function(data) {
        this.setState({content: data});
      }.bind(this)
    });
  },
  render: function() {
    return <div>{this.state.content}</div>;
  }
});

var Hello = React.createClass({
  render: function() {
    return <Include src="hello.txt" />;
  }
});

Rulo Kobashikawa · Answer 2 · 2014-07-19T17-24-00.000Z

Я понял, что рендер выполняется много раз, так что это не лучшее место для моего вызова ajax (-_-) '

Этот способ отлично работает:

<script type="text/jsx">
  /** @jsx React.DOM */
  var Include = React.createClass({
    getInitialState: function() {
      var url = this.props.src;
      $.ajax({
        url: url,
        success: function(data) {
          this.setState({content: data});
        }.bind(this)
      });
      return {content: 'loading...'};
    },
    render: function() {
      return <div>{this.state.content + new Date().getTime()}</div>;
    }
  });

  var Hello = React.createClass({
    render: function() {
        return <Include src="hello.txt" />;
    }
  });
  React.renderComponent(
    <Hello />,
    document.getElementById('hello')
  );
</script>

Спасибо, что прочитали!

Рад видеть, что вы решили проблему! Одно небольшое предложение, которое я бы порекомендовал, - переместить вызов ajax в метод componentWillMount. Результат тот же, но использование метода componentWillMount приводит к лучшему разделению проблем. Я приложил скрипку, чтобы вы могли, что я имею в виду. Ps - Реакция потрясающая Вот jsfiddle
@user3508122 user3508122 Я считаю, что componentDidMount подходит для этого. Он используется в официальном уроке . Единственная причина, по которой я могу думать, это то, что componentWillMount вызывается при использовании renderComponentToString (то есть рендеринг сервера).
@FakeRainBrigand - Хорошее место! Вы правы - моя ошибка.