javascript - 在数组上创建一些过滤器，然后使用 "All"过滤器取消过滤

Question

我正在 React 中构建经典的“todo”应用程序。我想实现根据状态过滤待办事项的功能:已完成、事件和全部。

我通常复制原始状态，然后将更改应用于副本。

问题是，当我在数组上使用过滤器时，我丢失了原始的 TODO，因此当我使用“全部”按钮时，我无法检索过滤之前的数据。

这是我的状态:

  state = {
    todos: [
      { id: 432402, title: "Make some music", isDone: false },
      { id: 421402, title: "Conquer the world", isDone: false },
      { id: 427740, title: "Go to the mall", isDone: true },
      { id: 471402, title: "Do some homework", isDone: false }
    ]
  };

这是我用来根据完成状态过滤状态的函数之一

  filterCompletedTasks = () => {
    const todos = [...this.state.todos];
    const filtered = todos.filter(todo => {
      return todo.isDone;
  });

我目前不使用 redux 或 Immutable.js，因此任何有关使用简单 React 的帮助都将非常有用。

Answer 1

关键思想是保持您所在州的所有项目不被修改。我复制了你的例子。看看它。我向状态添加了 showDone 变量，为您的应用添加基本的过滤灵 active 。当 showDone 等于 true 时，我在 state.todos 上应用 filter 方法并将结果分配给 todosList 负责显示结果的变量。

class App extends React.Component {
  
  state = {
    showDone: false,
    todos: [
      { id: 432402, title: "Make some music", isDone: false },
      { id: 421402, title: "Conquer the world", isDone: false },
      { id: 427740, title: "Go to the mall", isDone: true },
      { id: 471402, title: "Do some homework", isDone: false },
    ],
  }
  
  toggleFilter = () => this.setState({ showDone: !this.state.showDone })
  
  render() {
    let todosList = this.state.todos;
    
    if (this.state.showDone) {
      todosList = todosList.filter((todo) => todo.isDone);
    }
 
    return (
      <div>
        <h4>ToDo List</h4>
        <button onClick={this.toggleFilter}>Toggle show done</button>
         {todosList.map((todo, i) => (
          <div key={todo.id}>
            {todo.title}
            {todo.isDone && <span>[DONE]</span>}
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('react'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="react">