Question

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

{
  user: {
    auth: true,
    id: '5a603c58288fc745f8cada9e',
    first_name: 'john',
    email: 'xyz@abc.com',
    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);

这个组件，在store收到company_id数据之前会触发componentDidMount。所以我想要的是我希望在此组件从redux商店获取company_id之后调用componentDidMount。

Answer 1

而不是使用dot生命周期使用.生命周期方法，如下所示

dot

有关参考，请查看此生命周期方法的文档。 Docs For componentWillReceiveProps

Answer 2

我想要的是我希望在此之后调用componentDidMount component从redux store获取company_id。

最好不要在调用组件生命周期方法时进行修改。请参阅此refs以阅读有关组件生命周期方法的更多信息。

安装组件后，

componentDidMount仅触发一次。 company_id可能有也可能不可用

在你的情况下调用api调用的更好的函数将是componentWillReceiveProps。

在挂载的组件接收新道具之前调用

componentWillReceiveProps()。安装时不会调用它。

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

如果数据在redux store

2 个答案: