javascript - MapStateToProps 到同步上下文中的组件状态

Question

我知道我们可以通过这样做轻松地在组件状态中发送 mapStateToProps 的内容:

constructor(props){
  super(props);

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

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

但是如果 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 state 并将其映射到 props 时，你不应该在组件本地状态中设置它，这不是一个好的做法。当您的 promise 返回时，您将收到更新的 Prop ，并且在这种情况下您始终可以依赖 Prop 。

但如果您仍然想这样做，您可以覆盖 componentDidUpdate(prevProps)当你的 props 或 state 更新时将会调用它。如果您仍想这样做，您可以在此处设置状态。

过滤器注意事项

您可以在 componentDidUpdate 中进行过滤方法如: this.setState({filteredApps. this.props.apps.filter(<your filter logic>)})