Question

我有一个react组件，它创建一些本地状态：查询标识符。此查询标识符是在创建组件时创建的，并且不会/不应从组件的使用者传递。此状态仅在组件实例内使用，不会在其他任何实例之间共享-这样，感觉适合在组件中处于本地状态而不存储在redux存储中是合适的。

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

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

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

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

谢谢！

Answer 1

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

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

处理这种情况的一种更好的方法是将整个值集从mapStateToProps传递到组件，然后实现一个根据数据和查询ID返回结果的备注化方法

例如：

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

和组件渲染方法中（您也可以在componentDidUpdate中进行设置，并将值设置为state，以便您需要在除渲染之外的方法中使用它）

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

您如何在mapStateToPropsMethod方法内使用React组件的本地状态？

1 个答案: