在搜索时从reactjs中的对象数组中筛选出重复的元素

Question

因此，我正在尝试构建搜索页面，在其中我从项目数组(具有多个属性的对象(中搜索项目，因此我用于将当前搜索的项目与列表中的项目进行匹配的方法是使用.include()来获取匹配的名称，然后相应地填充数组。现在的问题是，每次循环运行时，它都会匹配名称，并在没有任何过滤的情况下将元素推入搜索的数组，导致重复的元素被填充。我使用了.filter()来消除重复性，但它没有反映在状态中。

useEffect(()=>{
setSearchedArray([]);
allItems.forEach(item => {
if(item.name.toUpperCase().includes(searchText.toUpperCase())){
// Also check whether the searched array already has that element or not.
setSearchedArray([...searchedArray, item])
console.log('searchedArray before filtering : ',searchedArray)
var pp = searchedArray.filter( (ele, ind) => ind === searchedArray.findIndex( elem => elem.id === ele.id));
console.log(pp);
setSearchedArray(pp);
}
});
},[searchText, setSearchText]);

只有当用户开始在输入框中键入时，才能实现这种使用效果。console.log(pp)给出了正确的输出，即滤波后的元素数组，但当我将其设置为setSearchedArray(pp)时，它并没有反映到searchedArray状态的变化。

Answer 1

我不太确定reactjs特定的代码，但我可以帮助您实现循环逻辑。

您的代码有几个问题：

1. 对于循环，最好使用while loop或for loop，forEach loop有很多开销(对性能不利(
2. 在每个循环上执行searchText.toUpperCase()是在复制工作
3. 过滤过于复杂。保持简单。通过先检查不需要的东西来简化逻辑
4. 您传入了setSearchText，但正在使用setSearchedArray，不确定这是影响代码的东西，还是只是reactjs特定的东西

useEffect(()=>{
const searchString = searchText.trim().toUpperCase();
const searchItems = [];
const searchKeys = [];
for ( const item of allItems ) {
const itemName = item.name.trim().toUpperCase();
if ( searchKeys.includes( itemName ) ) continue;
if ( itemName.includes( searchString ) == false ) continue;
searchKeys.push( itemName );
searchItems.push( item );
}
setSearchedArray( searchItems );
},[searchText, setSearchedArray]);