如何在 React 中过滤待办事项列表？

Question

每个人。 在这里提问的新手，虽然我经常用它来寻找答案。 我的问题是这样的：

我有一个“待办事项”应用程序。 我可以添加、删除和标记完成的项目。 但是，我正在苦苦挣扎的是用于查看不同项目的过滤器（查看全部、仅处于活动状态且仅已完成）。

我已经围绕按钮和单击事件构建了所有内容，但我似乎无法弄清楚如何实际显示所需的执行项目。 单击按钮会返回一个错误，即 todo.filter 不是 function，所以我显然在当前解决方案的某个地方离开了左侧字段。

这是我用来尝试过滤数组并仅显示 boolean 完成的待办事项的代码：true。

filComplete = id => {
this.setState({
  todos: this.state.todos.map(todo => {
    let comTodo = todo.filter(todo => todo.completed = true);
    return comTodo;
  })      
})
}

根据我自己的理解，我将所有已完成的待办事项映射到一个新的数组以进行显示，但我显然没有做正确的事情。

待办事项是每个单独的待办事项。 todos 是待办事项的数组。 id 是 todo.id 的键。

提前致谢。

Answer 1

let comTodo = todo.filter(todo => todo.completed = true);

使用单个=是分配，而不是比较。 相反，您可以使用

let comTodo = todo.filter(todo => todo.completed);

如果完成是 Boolean。 如果你想要的只是简单的过滤，你也不需要将map与filter结合起来，所以最终的产品看起来像

filComplete = id => {
  this.setState({
    todos: this.state.todos.filter(todo => todo.completed)
  })
}

Answer 2

不要打扰map - 它只是将一个数组转换为另一个相同长度的数组。 只需使用filter检查已completed的属性并删除那些不完整的待办事项：

this.setState({
  todos: this.state.todos.filter(todo => todo.completed)
});

尽管请注意，这样做意味着，一旦您只显示已完成的待办事项，您将无法恢复完整列表。 您可能想要道具中的完整列表，而不是 state。

另一个潜在的问题是setState是异步的，因此当您在其中引用this.state时并不总是正常工作 - 因为它并不总是具有您期望的值。 相反，传入 function ，它描述了如何将旧的 state 转换为新的：

this.setState(state => ({
  todos: state.todos.filter(todo => todo.completed)
}));