【问题标题】：setState not updating arraysetState 不更新数组
【发布时间】：2021-06-09 01:29:57
【问题描述】：

我正在使用 reactjs 创建一个待办事项应用程序，并且我正在尝试在用户单击输入时更新我的待办事项列表。当用户单击时，我可以更改项目，但项目不会更新状态。我不知道为什么状态没有更新。我认为这与 .map() 并将 todo 对象返回到新数组有关，但我无法弄清楚出了什么问题。有什么想法吗？

App.js

import React from 'react'
import TodoItem from './components/TodoItem'
import TodosData from './TodosData'
import './App.scss'

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      todoItems: TodosData
    }

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(id) {
    this.setState( prevState => {
      const updatedTodos = prevState.todoItems.map( todo => {
        if (todo.id === id) {
          todo.completed = !todo.completed
        }
        return todo
      })
      return {
        todoItems: updatedTodos
      }
    })
  }

  render() {
    const todosComponents = this.state.todoItems.map( item => {
      return <TodoItem key={item.id} todo={item} handleChange={this.handleChange}/>
    })
  
    return (
      <div className="TodoList">
        {todosComponents}
      </div>
    )
  }

}

export default App;

TodosItem.js

import React from 'react'

function TodoItem(props) {

    return (
        <div className="TodoItem">
            <input 
                type="checkbox" 
                checked={props.todo.completed} 
                onChange={ () => props.handleChange(props.todo.id) }
            />
            <p>{props.todo.text}</p>
        </div>
    )
}

export default TodoItem

【问题讨论】：

你正在改变状态，所以没有重新渲染。永远不要在 React 中改变状态

标签： javascript reactjs state setstate array.prototype.map

【解决方案1】：

问题

你正在改变你的状态对象。由于嵌套对象引用是相同的，因此 React 不会渲染任何可能已更新的内容。换句话说，由于对象引用与之前的渲染相同，React 假设没有任何变化。

handleChange(id) {
  this.setState( prevState => {
    const updatedTodos = prevState.todoItems.map(todo => {
      if (todo.id === id) {
        todo.completed = !todo.completed // <-- object mutation!!
      }
      return todo
    })
    return {
      todoItems: updatedTodos
    }
  })
}

解决方案

除了对数组进行浅拷贝外，您还需要对正在更新的任何嵌套状态进行浅拷贝。

handleChange(id) {
  this.setState( prevState => {
    const updatedTodos = prevState.todoItems.map(todo => {
      if (todo.id === id) {
        return {
          ...todo // <-- copy todo
          completed: !todo.completed, // <-- update propety
        }
      }
      return todo
    })
    return {
      todoItems: updatedTodos
    }
  })
}

【讨论】：