如果数据在redux存储中，则调用组件

Question

我有一个依赖于redux存储的组件。我的redux商店看起来像这样

{
  user: {
    auth: true,
    id: '5a603c58288fc745f8cada9e',
    first_name: 'john',
    email: '[e-mail]',
    company_id: '5a66d8b92cd8e931680778dc',
    company_name: 'My Company',
  }
}

所以基本上，当我刷新页面时，存储区消失了，需要一些时间来获取数据并将其设置为存储区，如上所述

我有一个组件，它需要company_id来获取有关该公司的数据

 componentDidMount(props) {
      console.log("idddddddd", this.props.company_id)
    // this.props.getCompanyData(this.props.company_id);
  }

使用react-redux我得到了company_id

CompanySetupPage.propTypes = {
  getCompanyData : PropTypes.func.isRequired,
  company_id : PropTypes.string.isRequired
}

function mapStateToProps(state) {
  return {
    company_id : state.user.company_id
  }
}

export default connect(mapStateToProps, {getCompanyData})(CompanySetupPage);

此组件，componentDidMount在存储区接收公司id数据之前被激发。所以我想要的是在这个组件从redux商店获得公司id后调用componentDidMount。

Answer 1

不要使用componentDidMountlifecycle，而是使用componentWillReceivePropslifecycle方法，如下所示

componentWillReceiveProps (nextProps) {
 if (this.props.company_id !== nextProps.company_id) {
    this.props.getCompanyData(this.props.company_id);
 }
}

参考看看这个生命周期方法的留档。文档的组件WillReceiveProps

Answer 2

我想要的是在这个组件从redux商店获得公司id后调用componentDidMount。

最好不要修改何时调用组件生命周期方法。有关组件生命周期方法的更多信息，请参见本参考资料。

安装组件后只触发一次。company_id可能可用，也可能不可用

在您的情况下，调用api调用的更好的函数是componentWillReceiveProps。

componentWillReceiveProps（）在安装的组件接收新的道具之前被调用。安装时，不会调用它。

  componentWillReceiveProps (nextProps) {
     if (this.props.company_id !== nextProps.company_id) {
        this.props.getCompanyData(this.props.company_id);
     }
    }