javascript - unshift 会改变状态吗？你如何判断状态是否发生了变化(来自工具)？

Question

我对 Native 和 React 还是陌生的，所以我一直在关注这个 tutorial对于待办事项应用程序并阅读以下文章:

• > https://lorenstewart.me/2017/01/22/javascript-array-methods-mutating-vs-non-mutating/
• > https://daveceddia.com/why-not-modify-react-state-directly/

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

有没有更有效的方法来编写 spread on the 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 以防止此类突变。