Question

每个人。尽管我经常使用它来查找答案，但是这里的问题并不陌生。我的问题是这样：

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

我拥有围绕按钮和click事件构建的所有内容，但是我似乎无法弄清楚的是如何实际显示所需的待办事项。单击按钮会返回一个错误，提示todo.filter不是功能，因此我显然不在当前解决方案的左侧。

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

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

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

todo是每个单独的待办事项。 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)
}));

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

2 个答案: