如何在反应中改变状态？

Question

我正在尝试更改嵌套在数组中的对象字段的值。我不断收到此错误消息，“无法分配给对象‘[object Array]’的只读属性‘0’”

状态如下

{
    "school stuffs": [
        {
            "_id": "629332e33f0e48af3d626645",
            "completed": false,
            
        },
        {
            "_id": "629425fc9c50b142dff947a9",
            "completed": true,
            
        }
    ],
    "household and furniture": [
        {
            "_id": "629334424709234a344c0189",
            "completed": false,
            
        },
        {
            "_id": "629334f12da7859af0828c9a",
            "completed": false,
            
        }
    ]
}

这是我用来改变状态并将“完成”的值更改为当前布尔值的相反值的代码。

const newArray = { ...productArray,  [value]: {...productArray}[value]  }
const index = productArray[value].findIndex(index => index._id === innerElement._id)
newArray[value][index].completed = !newArray[value][index].completed
console.log(newArray[value][index].completed);

Answer 1

关于 React 的事情是，你不应该改变状态，为此目的存在 useState 和纯函数方法，如下一个例子所示：假设您有一个购物车。

const [cart, setCart] = useState([]);

而你想添加一个产品，你可以这样做：

const addCart = product => {
  setCart([...cart, product]) // Using spread syntax.
  setCart(cart.concat(product)) // Using pure functions.
}

如果你想改变状态内对象中的道具，你可以这样做：

const increaseQuantity = id => {
  const mappedCart = cart.map(prd => prd.id === id ? {...prd, quantity: prd.quantity + 1} : prd);
  setCart(mappedCart)
}

当然你可以使用简单的 for 循环，或其他方式，但这里的问题是你不能在 react 中改变状态。

希望能帮到你

如何在反应中改变状态？

How to mutate state in react?

javascript

reactjs

react-hooks