在地图函数中反应setState相反的布尔值不改变状态答案

【问题标题】：React setState opposite boolean in map function not changing state在地图函数中反应setState相反的布尔值不改变状态
【发布时间】：2020-12-16 02:57:44
【问题描述】：

我在 ReactJS 中创建了一个简单的待办事项列表。它为存储在文件“TodoData.js”中的待办事项加载组件，数据按如下方式存储在该文件中：

const todosData = [
    {
        id:1,
        text: "Take out the thrash",
        completed: true
    },
    {
        id:2,
        text: "Grocery shopping",
        completed: false
    },

App.js 使用 TodoItem.js 组件通过 map 函数呈现每个待办事项。 TodoItem.js 使用条件渲染：

   if (props.item.completed == true) {
        return (
        <div className="todoclassDone">
            <input type="checkbox" 
            onChange={ () => props.handleChange(props.item.id)}/>
            <p className="lalatext"><del>{props.item.text}</del></p>
        </div>   
        )
    }
    else { .... //same code as above but with other className.

在 App.js 中，我使用 TodoItem.js 组件通过 map 函数渲染 TodoData 中的每个项目；如果 data.completed = true 背景为绿色，否则背景为红色。

问题：但是，App.js 中的 handleChange(id) 函数无法正常工作。我循环遍历 todosData 中的所有对象；如果 id 与用户单击的复选框的 id 相似，则应使用 todo.completed = !todo.completed 将其更改为相反的布尔值但是，在运行此代码时没有任何反应。 handleChange函数：

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

额外信息：上面提到的问题特别奇怪，因为如果我将用户单击的复选框的布尔值更改为 false 或 true，它确实有效。这不会导致所需的行为，因为现在我只能将 todo.completed 一次从 false 更改为 true。 ;在这种情况下，handleChange 函数如下所示：

  handleChange(id) {
    this.setState(prevState => {
      const updatedTodos = prevState.todos.map(todo => {
        if (todo.id == id) {
          todo.completed = true;
          }
          return todo
      })

非常感谢任何帮助，在此先感谢！ :-)

【问题讨论】：

标签： reactjs setstate

【解决方案1】：

Ciao，您可以尝试在数组上复制状态，修改数组并设置更新数组的状态。比如：

handleChange(id) {
    let result = this.state.todos;
    result = result.map(todo => {
        if (todo.id === id) todo.completed = !todo.completed;
        return todo;
    })
    this.setState({todos: result})
}

【讨论】：

【解决方案2】：

您应该在 setState 回调中返回新状态，以及新的状态对象。

带有相关代码的示例 todo 组件：

class Todo extends Component {
  state = {
    todos: todosData,
  }

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

        return todo;
      });

      return { todos };

  }
}

【讨论】：