Question

我对本机还是陌生的，因此会做出反应，所以我遵循了tutorial的待办事项应用程序并阅读了以下文章：

addNewTodo方法使用unshift，如果我没有记错的话，它会改变数组/状态吗？

有没有更有效的方法来在add方法上进行扩展？或者，如果我完全错了并且还好，那么有什么好的方法可以使用React工具来判断状态是否发生了突变（例如维护其他ppl代码）？

export default class App extends React.Component {
  constructor(){
    super();
    this.state = {
      todoInput: '',
      todos: [
        {id: 0, title: 'Insult Jerry', done: false},
        {id: 1, title: 'Build something', done: false},
        {id: 2, title: 'Morty Mind Blowers', done: false}
      ]
    }
  }
  addNewTodo () {
    let todos = this.state.todos;

    todos.unshift({
      id: todos.length + 1,
      title: this.state.todoInput,
      done: false
    });

    this.setState({
      todos,
      todoInput: ''
    });
  }
  toggleDone (item) {
    let todos = this.state.todos;
    todos = todos.map((todo) => {
      if (todo.id == item.id) {
        todo.done = !todo.done;
      }
      return todo;
    })
    this.setState({todos});
  }

  removeTodo (item) {
    let todos = this.state.todos;
    todos = todos.filter((todo) => todo.id !== item.id);
    this.setState({todos});
  }
...

Answer 1

您可以这样使用散布运算符而不是unshift：

this.setState({
  todos: [
    {
      id: this.state.todos.length + 1,
      title: this.state.todoInput,
      done: false
    },
    ...this.state.todos
  ]
});

我不知道有什么工具可以让您弄清楚状态是否正在突变。但是，如果您打算使用TypeScript，则可以将状态声明为readonly，以防止这种类型的突变。

不变会改变状态吗？您如何判断状态是否发生了突变（来自工具）？

1 个答案: