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

Question

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

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

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

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

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

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

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

提前致谢。

Answer 1

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

使用单个= 是一种赋值，而不是比较。相反，您可以使用

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

如果完成是一个布尔值。如果您想要的只是简单过滤，您也不需要将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)
});

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

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

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