React：如何在不改变状态的情况下基于属性过滤状态？

问题描述

我有两个按钮，一个是completedTasks，另一个是incompleteTasks 因此，当用户单击completedTasks时，我想根据属性过滤状态数组。反之亦然。

但是，问题是单击completedTasks之后，我的状态数组被突变为仅completedTasks过滤后的值。 这样，当我单击incompltedTasks时，我不会恢复我的状态

这是我的两种方法：

 const incompleteTasks = () => {
    const tasks = todos.filter((todo) => todo.completed === false);
    setTodos(tasks);
  };

  const completedTasks = () => {
    const tasks = todos.filter((todo) => todo.completed === true);
    setTodos(tasks);
  };

如何解决此问题，以便不修改实际的数组，而仅显示基于按钮单击的过滤属性。

解决方法

-第一个解决方案可能是使用状态来存储过滤器的状态

const [completed,setCompleted] = useState(null);  //true,false

 const incompleteTasks = () => setCompleted(false);             

 const completedTasks = () =>    setCompleted(true);

并在要显示的位置使用 filteredTodos

const filteredTodos = completed !==null ? todos.filter((todo) => todo.completed === completed):todos;
  

-第二个灵魂可能正在使用临时状态：

const [filteredTodos,setFilteredTodos] = useState([]);

 const incompleteTasks = () => {
    const tasks = todos.filter((todo) => todo.completed === false);
    setFilteredTodos(tasks);
  };

  const completedTasks = () => {
    const tasks = todos.filter((todo) => todo.completed === true);
    setFilteredTodos(tasks);
  };

然后在需要的地方显示 filteredTodos 。