gpt4 book ai didi

reactjs - React useReducer - 更新对象数组

转载 作者:行者123 更新时间:2023-12-05 05:47:30 25 4
gpt4 key购买 nike

我想使用 React.useReducer 来更新状态。我的状态是一组对象。触发更新操作时,不仅更新所需索引中的值,而且更新所有这些值。我只想更新指定数组索引中的值。我该怎么做?

点击button1后,我想得到

[{"amount":null,"kcal":null,"name":null,"isPieceType":false},
{"amount":null,"kcal":null,"name":null,"isPieceType":false},
{"amount":null,"kcal":125,"name":null,"isPieceType":false},
{"amount":null,"kcal":null,"name":null,"isPieceType":false}]

代替

[{"amount":null,"kcal":125,"name":null,"isPieceType":false},
{"amount":null,"kcal":125,"name":null,"isPieceType":false},
{"amount":null,"kcal":125,"name":null,"isPieceType":false},
{"amount":null,"kcal":125,"name":null,"isPieceType":false}]

我尝试将状态复制为 const newState = [...state] 并使用 lodash 的 cloneDeep。下面,链接到带有代码的 jsfiddle 以重现。

https://jsfiddle.net/wtj5eyfh/

最佳答案

ingredientsState 的初始状态引用了名为 initialIngredient 的同一个对象。当更新一个条目时,这会导致所有内容都更新。虽然const stateToUpdate = [...state]; 再次创建了一个新数组,所有条目都引用同一个对象。

修复

更改以下引用的数组条目

const [ingredientsState, ingredientsDispatch] = React.useReducer(mealReducer, [
initialIngredient,
initialIngredient,
initialIngredient,
initialIngredient
]);

成为 initialIngredient 对象副本的数组(spread operator 只需创建引用对象的克隆)

const [ingredientsState, ingredientsDispatch] = React.useReducer(mealReducer, [
{ ...initialIngredient },
{ ...initialIngredient },
{ ...initialIngredient },
{ ...initialIngredient }
]);

JS Fiddle

关于reactjs - React useReducer - 更新对象数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71006423/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com