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 的 saga 的结果并将其设置为组件的状态，或者我是否正在寻找一个奇怪的模式并且应该以其他方式过滤它？

Answer 1

首先，API 调用进入 componentDidMount 而不是 componentWillMount，后者现在也已弃用。请参考本指南：

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

其次，当你使用 redux state 并将其映射到 props 时，你不应该在你的组件本地状态中设置它，这不是一个好的做法。当您的承诺 return 时，您将收到更新的道具，并且在这种情况下您始终可以依赖道具。

但是如果你仍然想这样做，你可以覆盖 componentDidUpdate(prevProps) ，它将在你的道具或状态更新时被调用。如果您仍想这样做，可以在这里设置您的状态。

过滤器注意事项

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

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

MapStateToProps to component state in an sync context

javascript

reactjs

redux

redux-saga

react-state