如何在 mapStateToProps 方法中使用 React 组件本地状态？答案

【问题标题】：How can you use a React component's local state inside of the mapStateToPropsMethod?如何在 mapStateToProps 方法中使用 React 组件本地状态？
【发布时间】：2019-11-03 22:50:39
【问题描述】：

我有一个反应组件，它创建一些本地状态：一个查询标识符。此查询标识符是在创建组件时创建的，并且不/不应从组件的使用者传入。这个状态只在组件实例中使用，不与其他任何东西共享——因此，感觉它适合作为组件中的本地状态而不是存储在 redux 存储中。

react 组件通过 redux 调度异步操作，当操作完成时，结果将存储在 redux 状态的集合中，该集合由上述查询 id 索引。

在React组件的mapStateToProps函数中，我想从redux状态的查询结果集合中检索查询结果。但是，组件的查询 id 仅处于组件实例的本地状态，因此显然无法从 mapStateToProps 访问（因为 mapStateToProps 不是组件类的成员，并且显然没有办法访问该组件的本地状态实例）。

在 mapStateToProps 内部时，是否有一种既定方法可以访问 React 组件的本地状态？我知道我可以将本地状态存储在 redux 中（因此它在 mapStateToProps 中可用），但似乎没有必要，因为状态对于每个组件实例来说都是本地的。 ownProps 参数看起来很有趣，但它似乎要求我的 React 组件的消费者在组件实例化时在 props 中传递一个值，这在此处不是必需的（甚至令人困惑）。

有没有预期的方法可以做到这一点？还是我的组件设计错误，以至于我不应该尝试使用组件本地状态将 redux 状态正确映射到组件道具？

谢谢！

【问题讨论】：

标签： reactjs react-native redux react-redux

【解决方案1】：

无法在 mapStateToProps 方法中访问组件状态，因为它在 connect 中使用，它是组件的包装器。

但是，如果您将状态提升到组件的父级，然后将其作为道具传递给子级，则您可以在 mapStateToProps 中获取这些值。在这种情况下，您可以使用 ownProps 参数访问 mapStateToProps 中的值。但是，如果它只是此特定组件的本地状态，则无需将状态移动到父级。如果将状态移动到 redux 存储，情况也是如此。

处理这种情况的更好方法是将整个值集从 mapStateToProps 传递给组件，然后实现一个基于数据和查询 id 返回结果的 memoized 方法

例如：

const mapStateToProps = (state, props) => {
   return {
       collection: resultCollectionSelector(state, props)
   }
}

并且在组件渲染方法中（您也可以在 componentDidUpdate 中执行并将值设置为状态，如果您需要在渲染之外的方法中使用它）

constructor(props) {
    super(props);
    this.getMemoizedFilteredResult = _.memoize(this.getFilteredResult);
}
getFilteredResult = (collection, query) => {
     // process and return result
}
render() {
    const queryResult = this.getMemoizedFilteredResult(this.props.collection, this.state.query);
    ...
}

【讨论】：