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

【问题标题】：Does unshift mutate the state? How do you tell if the state is mutated (from tools)?unshift 会改变状态吗？你如何判断状态是否发生了变异（来自工具）？
【发布时间】：2019-06-03 18:40:25
【问题描述】：

我还是原生的新手并做出反应，所以我关注了这个 tutorial 的待办事项应用程序并阅读了以下文章：

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

【问题讨论】：

是的，unshift 改变了状态。您可以复制 todos 和 unshift 该数组。然后在setState中使用
或者使用 spread this.setState({ todos: [...this.state.todos, { id: .., title: .., done: false }], .. }) 不过不一定“更有效率”。
顺便说一句，toggleDone 也在改变状态，因为todo.done = !todo.done
@HereticMonkey - unshift 添加到开头而不是结尾
@madebydavid 好点；好消息是评论而不是答案:)。重点是它不一定更有效。

标签： javascript react-native

【解决方案1】：

您可以像这样使用扩展运算符代替unshift：

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

我不知道有任何工具可以让您确定状态是否正在发生变异。但是，如果您准备使用 TypeScript，您可以将状态声明为 readonly 以防止这种类型的突变。

【讨论】：

效果很好。所以这添加到最后` this.setState({ todos: [ ...this.state.todos, {...} ] }); ` 而这添加到开头： ` this.setState({...}, ...this.state.todos ] }); `