如何在不丢失数据的情况下筛选数组

Question

我有一个函数来过滤一个todo数组。数组被正确过滤，但当我键入其他内容时，它会删除其他数组元素，并且不会返回。

我看到了一些解决方案，但他们说"；您必须在render函数"中编写代码；我不使用这种方法，因为我在道具的帮助下在其他地方渲染数组。CCD_ 1具有所有本地存储数据。

如何在不丢失数据的情况下筛选此数据？

// *** Form.js ***
const filterTodos = (e) => {
const filtTod = filteredTodos.filter((todo) => {
return todo.text.toLowerCase().indexOf(e.target.value.toLowerCase()) !== -1
});
setFilteredTodos([...filtTod]);
};

// it's my render place *** TodoList.js ***
return (
<div className="todo-container">
<ul className="todo-list">
{filteredTodos.map((todo) => {
return (
<Todo
id={todo.id}
key={todo.id}
text={todo.text}
completed={todo.completed}
setTodos={setTodos}
todos={todos}
/>
)
})}
</ul>
</div>
);

const [inputText, setInputText] = useState("");
const [todos, setTodos] = useState([]); // Todos is all array items.
const [status, setStatus] = useState("all");
const [filteredTodos, setFilteredTodos] = useState([]); // the state is for my filter list

Answer 1

像todos数组一样过滤数据的想法是保持一致的"参考"；或"；源"；数组，表示应用程序中存在的所有todo。当用户添加或删除todo项时，此引用数组可能会发生更改，并且可能会以某种容量持久化到后端(或本地存储，在您的情况下(。这个数组是真理的源泉。

当用户输入搜索/筛选项时，每次都在所有todo的引用/源数组上进行筛选，而不是在已经筛选的结果集上进行筛选。

在代码中，todos表示源数组，filteredTodos表示单个搜索的结果。通过使用filteredTodos.filter，结果要么在每次筛选查询后不断减少，要么从一开始就没有任何结果可供使用——不管怎样，这都是不正确的。

将filteredTodos视为todos的临时快照，用于显示todos的子集视图以匹配用户的搜索项。

修复方法是使用todos.filter而不是filteredTodos.filter，这样您就可以始终搜索完整的数据集。