Question

我构建了一个列表，其中包含一个搜索表单，用React.js中的Redux过滤关键字列表。

这是控制器组件的一部分：

const mapStateToProps = (state) => {
    // make a sorted array of the keys in the items object
    var sortedItems = Object.keys(state.items).sort(function(a, b) {
        if(state.items[a].name.toLowerCase() < state.items[b].name.toLowerCase()) return -1;
        if(state.items[a].name.toLowerCase() > state.items[b].name.toLowerCase()) return 1;
        return 0;
    });

    // apply the filter to this array
    sortedItems = filterByKeyword(sortedItems, state.items, state.filter.keyword);

    return {
        items: state.items,
        sortedItems
    }
}

这是过滤器：

export const filterByKeyword = function(sortedItems, items, keyword) {
    keyword = keyword.toLowerCase();
    return sortedItems.filter(function(id) {
        return items[id].name.toLowerCase().indexOf(keyword) !== -1;
    });
}

这是列表组件：

const ItemList = ({ items, sortedItems }) => (
    <div>
        {Object.keys(sortedItems).map(function(key) {
            var id = sortedItems[key];

            return (
                <div key={id}>
                    {items[id].name}
                </div>
            );
        }, this)}
    </div>
);

基本上这可行，但一旦关键字发生变化，我就会收到如下错误：

Uncaught Invariant Violation: findComponentRoot(..., .0.1.0.0.$123): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG-elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.

我还创建了一个版本，其中过滤的项目保存在第二个数组中，而ItemList迭代所有项目并分配className =＆＃39; hide＆＃39;如果在过滤的项目数组中找不到id，则返回div。虽然这没有错误，但它太慢了。

那么，过滤像这样的列表的React / Redux方法是什么？

Answer 1

我以某种方式遇到了同样的问题，设置不同，但基本上是相同的。

如果您总是返回 new 数组引用（sortedItems），您会收到不可侵犯的违规行为。

如果您保留相同的引用并从中移除所有项目，则push新的React知道没有任何更改。

在React中过滤列表时出现未捕获的不变违规

1 个答案: