Question

console.log的item.completion被触发两次。它显示新的取反值并切换回其原始值。因此，每次调用toggleTask函数时，item.completion都不会更改。是什么原因造成的？

toggleTask(id) {
    this.setState(prevState => {
      const newTodos = prevState.todos.map(item => {
        if (item.id === id) {
          item.completion = !item.completion
          console.log(item.completion)
        }
        return item
      })
      return { todos: newTodos }
    })
  }

Answer 1

问题出在这里

Foo.includes(:bars).references(:bars).sum('foos.cost * bars.available')

AS，对象是按引用传递的，而不是按值传递的，因此，在修改对象时，状态将被直接修改，并且React从返回值和状态中看不到差异，因此不会进行渲染。

尝试一些不能直接修改对象的东西，像这样

this.setState(prevState => {
  const newTodos = prevState.todos.map(item => {
     if (item.id === id) {
        item.completion = !item.completion // !! HERE !!
        console.log(item.completion)
      }
      return item
   })
   return { todos: newTodos }
})

灵感来自JavaScript: How to pass object by value?

SetState不会更改状态值

1 个答案: