React useReducer - 更新对象数组

Question

我想使用 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。下面，link 使用 jsfiddle 代码进行重现。

https://jsfiddle.net/wtj5eyfh/

Answer 1

您 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

React useReducer - 更新对象数组

React useReducer - update array of objects

reactjs

react-hooks

use-reducer

修复