Question

我有一个函数来过滤一组待办事项。该数组已正确过滤，但是当我输入其他内容时，它会删除其他数组元素并且不会返回。

我看过一些解决方案，但他们说“你必须在渲染函数中编写代码”，我不使用这种方法，因为我在道具的帮助下在别处渲染数组。 filteredTodos 拥有所有本地存储数据。

如何在不丢失数据的情况下过滤此数据？

// *** 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 表示源数组，filteredTodos 表示单个搜索的结果。通过使用 filteredTodos.filter，结果要么在每次过滤查询后不断减少，要么一开始就没有任何结果可供使用 - 无论哪种方式，都是不正确的。

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

解决方法是使用 todos.filter 而不是 filteredTodos.filter，以便您始终搜索完整的数据集。

如何在不丢失数据的情况下过滤数组？

1 个答案: