Состояние реакции становится «поврежденным»

Question

Я работаю над простой частью внешнего интерфейса React.JS.

По сути, у меня есть СПА для просмотра исторических данных.В дизайне есть несколько фильтров, которые мне нужно заполнить по одному, начиная с верхнего в моей логической иерархии.

Я делаю что-то вроде:

  componentWillMount() {
    if (!this.props.advertisers) {
      this.props.loadAdvertisers();
    }
  }

Однажды массив рекламодателейбыл загружен, я сопоставляю его с параметрами выбранного компонента (используя react-select), устанавливаю выделение для первого элемента в списке и загружаю следующий список - campaigns.

Насколько яПонимаете, лучший способ сделать это по-прежнему componentWillReceiveProps(), и я немного озадачен тем, как это можно сделать по-другому, учитывая, что componentWillReceiveProps постепенно сокращается.

Мой код выглядит так:

componentWillReceiveProps(nextProps) {
  if (nextProps.advertisers && !this.props.advertisers) {
    const advertiser = nextProps.advertisers[0];
    this.setState({
      advertiser: {
        value: advertiser['id'],
        label: advertiser['name']
      }
    });
    nextProps.loadCampaigns(advertiser['id']);
  }
  // if campaigns list changed, reload the next filtered array
  if (nextProps.campaigns && this.props.campaigns !== nextProps.campaigns) {
    ...
  }

Это работало нормально, пока я не решил добавить индикатор загрузки.Я сопоставил свойство loading состояния, например, для campaigns оно отображается через this.props.campaignsLoading, затем выполните:

return (this.props.campaignsLoading || this.props...Loading || ...) ? 
       <ProgressIndicator> : <MainContentPanel>

Проблема в том, что мое состояние не устанавливается правильно внутри componentWillReceiveProps().

В проекте используется @rematch, и я сначала попробовал это с плагином @rematch/loading, и когда проблема возникла, я подумал, что плагин делает что-то неправильно.Затем я сопоставил loading свойства вручную и просто добавил еще два dispatch es, чтобы вручную установить загрузку flag.

Все реквизиты устанавливаются / сбрасываются правильно, но мое состояние не меняетсяустановить и ничего не работает.Есть предложения?

Answer 1

Когда вы делаете

if (nextProps.advertisers && !this.props.advertisers) {

Вы не сравниваете следующий и предыдущий реквизит."this.props.advertisers", вероятно, уже установлен, поэтому вы никогда не заходите в строку setState.Хотя использование componentWillReceiveProps больше не является рекомендуемым способом ( вам, вероятно, не нужно производное состояние ), вы, вероятно, хотите сделать примерно:

if (nextProps.advertisers && nextProps.advertisers !== !this.props.advertisers) {