Redux Thunk Async React компонент сделал монтирование - PullRequest
Новая
       8

Redux Thunk Async React компонент сделал монтирование

0 голосов
/ 04 мая 2018 

componentDidMount() {
    this.props.fetchAccountData();
}
render() {
    const { accounts  } = this.props.accountData;
    policyDetailsInfo =  accounts[0].policy_summary;
    accountDetails = accounts[0];
    return (
      <div>
        <Account
          accountDetails={accountDetails}
          policyDetails={policyDetailsInfo}
        />
      </div>
    )
}

const mapStateToProps = state => ({
  accountData: state.accountData
});

const mapDispatchToProps = {
  fetchAccountData
};

export default connect(mapStateToProps, mapDispatchToProps)(AccountHome);
  1. Здесь в componentDidMount метод fetchAccountData представляет собой асинхронный вызов.
  2. Здесь я хочу получить ответ fetchAccountData после этого только управление переходит в метод рендеринга. Вот так будет много раз заходить в метод рендеринга, пока метод асинхронного вызова не получит ответ.
  3. Из-за этого элемента управления перейдите в дочерний компонент, и этот компонент сделал не получить свойство, которое, вероятно, заполнит после ответа из асинхронного вызова.

С уважением,

1 Ответ

0 голосов
/ 06 мая 2018

Если вы правильно сконфигурировали редуктор, всякий раз, когда поступает ответ асинхронного вызова, запускается компонент AccountHome метода render() (так как есть изменение в accountData, состояние, в котором AccountHome зарегистрировано для ) 

const mapStateToProps = state => ({
  accountData: state.accountData
})

У вас есть много способов написать логику для обработки accountData, но для простоты и сосредоточенности в вставляемом коде обновите метод render() и ознакомьте его с accountData prop: 

render() {
  const accounts = this.props.accountData;
  if(!accounts || !accounts.length ) {
    // set a simple loading solution
    // avoid errors using empty accounts
    return (
      <div>
        Loading content...
      </div>
    }
  }

  // here accounts has data inside
  const policyDetailsInfo =  accounts[0].policy_summary;
  const accountDetails = accounts[0];

  return (
    <div>
      <Account
        accountDetails={accountDetails}
        policyDetails={policyDetailsInfo}
      />
    </div>
  }
}
...