MapStateToProps在同步上下文中变为组件状态

Question

我知道我们可以很容易地以组件的状态发送mapStateToProps的内容：

constructor(props){
  super(props);

  this.state = {
     filteredApps: this.props.apps
  }
}

在此用例中，this.state.filteredApps充满了从Redux映射到道具的内容。

但是如果this.props.apps仅在异步调用后才正确填充怎么办？在异步上下文中，this.props.apps可能在初始化之前一直为空数组，直到获取实际数据为止。以这个为例：

class AppFilterer extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      filteredApps : this.props.apps
    }
  }

  componentWillMount() {
      this.props.getApps();
  }

  render(){ return <div> </div> }

}

const mapStateToProps = state => {
   let { apps } = state.Admin;
   return { apps };
};

export default connect(mapStateToProps, { getApps })(AppFilterer);

在这种情况下，我的Redux动作（由Saga捕获）this.props.getApps();是使我的props充满了所有应用程序的调用，并从componentWillMount函数调用。它被初始化为一个空数组，并在调用完成后被应用填充。

我希望在从API中提取这些应用程序后对其进行过滤，因此希望将它们放入组件的状态中，以免与Redux状态发生冲突。在这种情况下，更新组件状态的最佳实践是什么？换句话说，是否有办法获取已映射到props的英雄传奇的结果并将其设置为组件的状态，或者我是否正在寻找一个怪异的模式并应以其他方式对其进行过滤？

Answer 1

首先所有API调用进入componentDidMount，而不进入componentWillMount，现在也已弃用。请参考此指南：

https://reactjs.org/docs/react-component.html

第二，当您使用redux状态并将其映射到props时，不应将其设置为组件本地状态，这不是一个好习惯。当您的诺言恢复时，您将收到更新的道具，在这种情况下，您始终可以依靠道具。

但是如果您仍然想这样做，则可以覆盖componentDidUpdate(prevProps)，当您更新道具或状态时会调用它。如果您仍想在此设置状态，请在这里进行设置。