时间戳

首页 > 解决方案 > 如何在 mapStateToPropsMethod 中使用 React 组件的本地状态？

reactjs - 如何在 mapStateToPropsMethod 中使用 React 组件的本地状态？

问题描述

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

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

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

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

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

谢谢！

标签： reactjsreact-nativereduxreact-redux

解决方案

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

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

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

前任：

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);
    ...
}

推荐阅读