Когда компоненты ReactJS делают вызовы AJAX для обновления состояния из реквизита?

У меня есть компонент React, который отображает информацию об объекте. Идентификатор объекта передается через свойство. Компонент запускает вызов AJAX в "componentDidMount" для извлечения сущности и состояния обновления, когда вызов завершается/завершается с ошибкой.

Это прекрасно работает, за исключением того, что компонент не извлекает новые данные при изменении идентификатора объекта (через реквизит).

Я попытался запустить вызов в "componentWillReceiveProps", но на этом этапе у компонента все еще есть старые свойства. Я должен был бы передать nextProps методу вызова AJAX, и это не кажется правильным.

Каков наилучший/самый чистый способ, чтобы компонент асинхронно обновлял свое состояние в ответ на изменение свойства?

Ответ 1

Я тоже новичок, поэтому архитектура Flux немного запугивает меня. Я делаю это точно так, как вы сказали, используя componentWillMount для загрузки исходных данных через AJAX, а затем componentWillReceiveProps с помощью nextProps для загрузки новых данных снова, если/при изменении реквизита:

var Table = React.createClass({
  getInitialState: function() {
    return { data: [] };
  },

  componentWillMount: function(){
    this.dataSource();
  },

  componentWillReceiveProps: function(nextProps){
    this.dataSource(nextProps);
  },

  dataSource: function(props){
    props = props || this.props;

    return $.ajax({
      type: "get",
      dataType: 'json',
      url: '/products?page=' + props.page + "&pageSize=" + props.pageSize
    }).done(function(result){
      this.setState({ data: result });
    }.bind(this));
  },

  render: function() {
    return (
      <table className="table table-striped table-bordered">
        <Head />
        <Body data={this.state.data}/>
      </table>
    );
  }
});

Ответ 2

Вы правы, вызов в componentWillReceiveProps не лучший способ справиться с этим.

Я бы предложил попробовать архитектуру Flux, чтобы ваши данные могли быть "централизованы" в магазине. Когда идентификатор объекта изменяется, запустите действие, которое извлекает данные и обновляет хранилище новыми данными. Когда хранилище будет обновлено, оно выдает событие, а компоненты будут отображать новые данные.