Javascript映射函数未存储正确的值

Question

我的应用程序只是一个看起来像这样的简单清单

ReactJS中的map函数有一些奇怪的行为。

import React from "react"
import "./App.css"
import todosData from "./data/todosData.js"
import TodoItem from "./components/TodoItem.js"

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            todos: todosData
        }
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick(id) {
        this.setState(prevState => {
            const updatedItems = prevState.todos.map(todo => {
                if (todo.id === id) {
                    todo.completed = !todo.completed
                }
                console.log(todo)
                return todo
            })
            console.log(updatedItems)
            return {
                todos: updatedItems
            }
        })
    }

    render() {
        const todoItems = this.state.todos.map(item => < TodoItem item = {
                item
            }
            key = {
                item.id
            }
            handleClick = {
                this.handleClick
            } />) 

            return ( 
              <div> 
                { todoItems } 
              </div>
            )
        }
    }
}

export default App

每当我打印出来以检查值是否确实用console.log（todo.completed）更改时，它会在控制台中打印出正确的值，但随后我尝试打印出整个对象列表，突然它又回到了原来的状态。在本例中，我单击了选项1

这是我打印出常量updatedItems时的结果

我可以改变任何其他属性没有任何麻烦，我甚至可以设置

todo.completed = false

它会将选中的复选框更改为未选中的复选框，只有当我尝试使用与其已存储的值相反的值赋值时，映射函数才不会正常工作

这是我从文件中获取的数据，如果有帮助的话

const todosData = [{
        id: 1,
        text: "Take out the trash",
        completed: true
    },
    {
        id: 2,
        text: "Grocery shopping",
        completed: false
    },
    {
        id: 3,
        text: "Clean gecko tank",
        completed: false
    },
    {
        id: 4,
        text: "Mow lawn",
        completed: true
    },
    {
        id: 5,
        text: "Catch up on Arrested Development",
        completed: false
    }
]

export default todosData

Answer 1

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

})
}

请试一次。您可能会在控制台中获得更新的项目

Answer 2

切换“已完成”状态时，您正在更改状态对象。

handleClick(id) {
  this.setState(prevState => {
    const updatedItems = prevState.todos.map(todo => {
      if (todo.id === id) {
        todo.completed = !todo.completed; // <-- state mutation!!
      }
      return todo;
    });
    return {
      todos: updatedItems,
    };
  })
}

您不仅需要浅层复制正在更新的数组，还需要浅层复制所有要更新的嵌套对象，这样它们就不再是浅层相等的了。

handleClick(id) {
  this.setState(prevState => {
    const updatedItems = prevState.todos.map(todo => {
      if (todo.id === id) {
        return {
          ...todo, // <-- copy into new object reference
          completed: !todo.completed, // <-- set new property value
        };
      }
      return todo;
    });
    return {
      todos: updatedItems,
    }
  })
}