如何在反应中改变状态？

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 中改变状态。

我希望我能帮助你