过滤状态数据不能正常工作 - React (CRA)

Question

我创建了一个简单的待办事项应用程序。我可以向待办事项添加项目，并通过all、completed 和incomplete 过滤列表。所有列表分别呈现。问题是当我是completed 或incomplete 过滤器中的任何一个，并且我分别选中或取消选中任务时，应在每次选中/取消选中时再次过滤列表。我可以调用 filter 方法，但是由于状态出现了一些意外行为，它会删除列表元素，除非我在任何过滤器处于活动状态时选中/取消选中。

我已经创建了这个沙盒，玩玩它。

Sanbox

Answer 1

我认为您的问题是，当您检查项目时，在 modifyList 中，您将 copiedList 设置为 list 的先前状态，这是整个数据的过滤子集。 将setList 更改为setCopiedList 似乎已经解决了我的问题。

const modifyList = (list) => {
  setCopiedList((prevState) => {
    let state = [...prevState];
    return state;
  });
};