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

Question

我有两个按钮，一个是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);
  };

如何解决这个问题，使实际数组不被修改，只显示基于按钮点击的过滤属性。

Answer 1

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

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。

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

React: how can I filter the state based on a property without mutating the state?

javascript

state-management

reactjs

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

React: how can I filter the state based on a property without mutating the state?

javascript

state-management

reactjs

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