Question

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);

这里的componentDidMount是fetchAccountData方法异步调用。
这里我想要fetchAccountData响应得到之后，只有控件进入渲染方法。在这里它会如此很多时候进入render方法，直到异步调用方法得到响应。
由于此控件进入子组件并且该组件已执行没有得到可能会在回复后填写的财产来自异步电话。

此致

Answer 1

如果您正确配置了reducer，每当异步调用响应到达时，render()方法AccountHome组件将被触发（因为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>
  }
}

Redux Thunk Async React组件已安装

1 个答案: