javascript - React - 如何过滤列表而不丢失数据？

Question

我能够过滤列表以显示我想要的项目。问题是，我的过滤方法实际上改变了列表，而不仅仅是显示我想要的项目。我相信这是因为我实际上使用 setState 来完成过滤，所以我需要使用一种方法来保留原始列表并简单地实现过滤器而不是更改状态。

这是我用来过滤的函数的代码:

  filAll = () => {
    this.setState({
      todos: this.state.todos
    });
  }

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

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

有人提到我需要在 props 中提供完整的列表，而不是在 state 中，但我不太明白这意味着什么或如何实现它。

谢谢。

Answer 1

您可以在渲染函数内执行过滤器，而不更新状态。然后，您可以在渲染时访问过滤后的状态，但永远不会修改原始状态。

class myComponent extends React.Component {
    render() {
        let filteredComplete = this.state.todos.filter(todo => todo.completed)
        // Use the filtered state here
        return ...
    }
}