如果数据在 redux 存储中，则调用 componentDidMount 钩子答案

【问题标题】：call componentDidMount hook if data is in redux store如果数据在 redux 存储中，则调用 componentDidMount 钩子
【发布时间】：2018-07-02 13:36:54
【问题描述】：

我有一个依赖于 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);

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

【问题讨论】：

组件生命周期函数的调用顺序不用改变，你需要的是componentWillReceiveProps生命周期钩子
我将如何使用它？
查看stackoverflow.com/questions/43779411/…
很高兴它有帮助，
考虑对有帮助的 SO 提出问题和答案

标签： reactjs redux react-redux

【解决方案1】：

不要使用componentDidMount生命周期，而是使用componentWillReceiveProps生命周期方法，如下所示

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

请查看此生命周期方法的文档以供参考。 Docs For componentWillReceiveProps

【讨论】：

【解决方案2】：

我想要的是在此之后调用 componentDidMount 组件从 redux 商店获取 company_id。

组件生命周期方法何时被调用最好不要修改。请参阅此refs 以了解有关组件生命周期方法的更多信息。

componentDidMount 仅在组件挂载后触发一次。 company_id 可能可用也可能不可用

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

componentWillReceiveProps() 在挂载的组件接收到新的 props 之前被调用。挂载时不会调用它。

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

【讨论】：