在react中创建搜索输入时

Question

当在react中创建搜索输入时，它成功地工作了，但当从输入中删除搜索词时，它会从数组中删除所有数据，并且不返回任何

我需要搜索，但当我再次返回阵列时

const [todos, setTodos] = useState([]);
const searchTodo = (todoitem) => {
const searchedTodo = todos.filter((todo) => {
if (todo.text.toLowerCase().includes(todoitem.toLowerCase())) {
return todo;
}
});
setTodos(searchedTodo);

}；

Answer 1

您可以为过滤后的todos创建一个新变量，也可以在正文中使用它，而不需要任何额外的字段。

首先，让我们来看看第一个解决方案：

const [todos, setTodos] = useState([]);
const [filteredTodos, setFilteredTodos] = useState([]);
const searchTodo = (todoitem) => {
const searchedTodo = todos.filter((todo) => {
if (todo.text.toLowerCase().includes(todoitem.toLowerCase())) {
return todo;
}
return searchedTodo;
});
useEffect(() => {
setFilteredTodos(searchTodo(todoitem));
}, [todoitem]); \ todoitem is the text you want to search with

另一种方法是使用返回体中的函数，如下所示：

const [todos, setTodos] = useState([]);
const searchTodo = (todoitem) => {
const searchedTodo = todos.filter((todo) => {
if (todo.text.toLowerCase().includes(todoitem.toLowerCase())) {
return todo;
}
return searchedTodo;
});
return (
<div>
{searchTodo(todoitem).map(todo => (<div>{todo}</div>))}
</div>
);

Answer 2

基于ldruskis注释：

const [todos, setTodos] = useState([]);
const [filtered, setFiltered] = useState([]);
const searchTodo = (todoitem) => {
const searchedTodo = todos.filter((todo) => {
if (todo.text.toLowerCase().includes(todoitem.toLowerCase())) {
return todo;
}
});
setFiltered(searchedTodo);

然后添加条件渲染，例如：

{filtered.length > 0 ? <render filtered> : <render todos>