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

Question

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

但是，问题是在单击completedTasks之后，我的状态数组变为仅completedTasks筛选值。这样，当我点击uncompetedTasks时，我就不会返回我的状态

这是我的两种方法：

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。