Question

我正在尝试在我的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( ... ) }我还不完全确定在哪里处理过滤逻辑。

Answer 1

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

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

在Redux getter中：

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

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

Answer 2

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

mapStateToProps = (state, existingProps) => {}

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

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

2 个答案: