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)
    });
  }

有人提到我需要道具中的完整列表而不是状态，但是我真的不明白这意味着什么或如何实现。

谢谢。

Answer 1

您可以在render函数中执行过滤，而无需更新状态。这样，您在渲染时就可以访问过滤后的状态，但是您绝不会修改原始状态。

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

Answer 2

您只需要两个状态变量。 allTodos和todos。使用allTodos过滤或处理数据，todos将被显示/渲染

costructor(props) {
  const todos = [...props.todos];
  this.state = {
     allTodos: todos,
     todos: todos
  };
}

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

反应-如何在不丢失数据的情况下过滤列表？

2 个答案: