unshift 会改变状态吗？你如何判断状态是否发生了变异（来自工具）？

Question

我还是本机和反应的新手，所以我正在关注本教程的 todo 应用程序并阅读以下文章：

https://lorenstewart.me/2017/01/22/javascript-array-methods-mutating-vs-non-mutating/

https://daveceddia.com/why-not-modify-react-state-directly/

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

有没有更有效的方法来写这个在 add 方法上传播？或者，如果我完全错了并且很好，那么使用反应工具确定状态是否正在发生变化（比如维护其他 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以防止这种类型的突变。