如何过滤数组而不丢失数据？答案

【问题标题】：How to filter an array without losing data?如何过滤数组而不丢失数据？
【发布时间】：2021-07-27 05:30:48
【问题描述】：

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

我见过一些解决方案，但他们说“你必须在渲染函数中编写代码”，而我没有使用这种方法，因为我在 props 的帮助下将数组渲染到其他地方。 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

【问题讨论】：

你有一些待办事项的参考数组吗？如果您对过滤和原始列表都使用一个列表，则在一次过滤操作之后，您已经不可挽回地丢失了数据。使用两个列表：一个包含所有待办事项，另一个只包含过滤的待显示，根据所有待办事项的引用数组动态生成。
@ggorlen 我有，但我不知道我是怎么做到的。
请将您的参考数组显示为minimal reproducible example 组件的一部分。很可能，您只需要filteredTodos.filter => allTodos.filter 或类似的东西。
@ggorlen 请你写一个答案？
@ggorlen 好的，我添加了所有州。如果您想了解有关代码的其他信息。请告诉我。

标签： javascript arrays reactjs filter

【解决方案1】：

过滤数据（如待办事项数组）的想法是保持一致的“参考”或“源”数组，以表示应用中存在的所有待办事项。当用户添加或删除待办事项时，此引用数组可能会发生变化，并且可能会以某种容量或其他容量持久保存到后端（或本地存储，在您的情况下）。这个数组就是真相的来源。

当用户输入搜索/过滤词时，每次都过滤所有待办事项的引用/源数组，而不是已经过滤的结果集。

在您的代码中，todos 代表源数组，filteredTodos 代表单个搜索的结果。通过使用filteredTodos.filter，结果要么在每次过滤查询后不断减少，要么从一开始就没有任何结果可供使用——无论哪种方式，都是不正确的。

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

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

【讨论】：