在mapStateToProps中收到另一个道具时更新道具

Posted 2021-04-18

我正在尝试在我的React应用程序中实现基本过滤器。我有两个由Redux管理的道具。它们看起来如下：

const mapStateToProps = state => {
    return {
        groceries: getSortedGrocers(state.groceries),
        searchFilter: state.searchFilter
    };
};

我面临的问题是当searchFilter更新时，我需要过滤groceries数组，这最终是我的Component实例中的this.props.groceries。

这个最好的设计模式是什么？我是否应该使用生命周期事件，所以每当更新searchFilter时，我都会过滤groceries？我是否可以指出如何正确处理过滤的正确文档，所以如果存在searchFilter，我会缩小groceries显示的范围？最终，在某个地方，会出现这样的事情：

if ( this.props.searchFilter ) { groceries.filter( ... ) }我只是不完全确定在哪里处理过滤逻辑。

答案

您的过滤应该已经在Redux中的getSortedGrocers函数中完成。

const mapStateToProps = state => {
    return {
        groceries: getSortedGrocers(state.groceries, state.searchFilter)
    };
};

并在Redux中获取：

export const getSortedGrocers = (groceries, filter) => {
    // do sorting here
};

据我所知，这是过滤内容的标准设计模式。你也可以对你的渲染方法进行过滤，但不鼓励这样做（尽管效率不高，有趣的是）。

另一答案

每当searchFilter更新时，都会调用mapStateTopProps。你可以在那里进行过滤。如果你需要使用组件中的现有道具，你可以将它们作为第二个参数。

mapStateToProps = (state, existingProps) => {}

也许我误解了这个问题。如果您需要的某些信息作为道具传递给组件，则应使用第二个参数。