如何在可变状态中添加所有已过滤元素

Question

我有一个对象数组，其中包含存储在state varaible中的用户数据，以及一个显示这些用户的表。我有一个搜索字段，用户可以在其中键入名称并进行搜索。现在我的问题是，当用户键入我想从这些名称中搜索并更新状态变量时，当用户清除输入时，我想向所有用户显示搜索功能。

const searchUsers = () => {
items.filter((item) => {
if (searchTerm === null) {
setItems([...items]);
return item;
} else if (item.title.toLowerCase().includes(searchTerm)) {
setItems([item]);
}
});
};

Answer 1

您可以尝试使用Memo挂钩。您甚至不需要更新筛选结果的状态。

const searchResults = useMemo(() => {
if (!searchTerm) {
return items;
}
return items?.filter((item) =>
item?.toLowerCase()?.includes(searchTerm?.toLowerCase().trim())
);
}, [items, searchTerm]);

在渲染表时，可以直接使用searchResults。

Answer 2

试试这个：

const searchUsers = () => {
if (searchTerm === "" || searchTerm === null) {
setItems([...items])
return
}
const results = items.filter((item) => item.title.toLowerCase().includes(searchTerm))
setItems(results)
}

1. 如果searchTerm为空，则返回所有项目并停止搜索
2. 如果searchTerm不为空，则根据searchTerm筛选项目
3. 将results设置为项目

您还必须确保setItems不是items的设置器。如果你过滤，你会"；删除"；当用户搜索某个内容并返回到空的/或另一个搜索项时，列表中会导致元素消失的项目。要解决此问题，请将所有项目所在的状态与要在JSX部分中显示或筛选的项目的状态分开。

代码可能看起来像这样：

const items = ...
const [filteredItems, setFilteredItems] = setState(items)
const searchUsers = () => {
if (searchTerm === "" || searchTerm === null) {
setFilteredItems([...items])
return
}
const results = items.filter((item) => item.title.toLowerCase().includes(searchTerm))
setFilteredItems(results)
}
return {filteredItems.map(item => <p>{item.title}</p>)}

Answer 3

var defaultitems = useMemo(_=>items)
const searchUsers = () => {
if(!searchTerm) return setItems(defaultitems)
var filtered = items.filter((item) => {
if (item.title.toLowerCase().includes(searchTerm)) {
return true
}
return false
});
setItems(filtered)
};