向Redux Toolkit状态添加新的键值

Question

我正在尝试创建一个应用程序，允许用户构建配方并对其进行更改。我正在使用React Toolkit和Redux来管理状态。

示例状态：

const ingredients = [
{
ingredientName: 'Flour',
ingredientMeasurement: 500,
ingredientUnit:'g',
ingredientMeasurementUpdate: 0,
},
{
ingredientName: 'Water',
ingredientMeasurement: 200,
ingredientUnit:'g',
ingredientMeasurementUpdate: 0,
},
{
ingredientName: 'Apples',
ingredientMeasurement: 350,
ingredientUnit:'g',
ingredientMeasurementUpdate: 0,
},

我有这片做配料。updateFields是添加一个新的测量值并将其分配给该成分。

const initialState = {
ingrediants: [],
};
export const ingredientsSlice = createSlice({
name: "ingredientList",
initialState,
reducers: {
addIngredients: (state, action) => {
state.ingrediants = [...state.ingrediants, action.payload];
},
removeIngrediants: (state, action) => {
state.ingrediants = state.ingrediants.filter(
(i) => i.id !== action.payload.id
);
},
updateFields: (state, action) => {
state.ingrediants = { ...state.ingrediants, ...action.payload };
},
},
});
export const { addIngredients, removeIngrediants, updateFields } = ingredientsSlice.actions;
export default ingredientsSlice.reducer;

我有这个页面显示成分列表：

const alteration = () => {
return (
<main className="h-screen flex">
<div className="relative h-full w-1/3 border-4">
<div className="absolute inset-y-0 left-0 w-80">
<h1>Hello </h1>
<RecipeList />
</div>
</div>
<div></div>
</main>
);
};
export default alteration;

这是我希望它更新状态并添加新的测量的组件

export const RecipeList = memo(() => {
const ingredientList = useSelector(
(state) => state.ingredientList.ingrediants
);
const dispatch = useDispatch();
const [
ingredientMeasurementUpdate,
setIngrediantMeasurementUpdate,
] = useState();
const onFormSubmit = useCallback(
(e) => {
e.preventDefault();
dispatch(
updateFields({
ingredientMeasurementUpdate,
})
);
setIngrediantMeasurementUpdate("");
},
[ingredientMeasurementUpdate, dispatch]
);
return (
<div>
<div>
{ingredientList.map((ingredient) => (
<div
className="border-gray-800 border h-52 w-full"
key={ingredient.id}
>
{` ${ingredient.ingredientMeasurement}${ingredient.ingredientUnit}  ${ingredient.ingredientName}`}{" "}
<form onSubmit={onFormSubmit}>
<fieldset>
<input
className="border-2"
type="text"
value={ingredientMeasurementUpdate}
id="ingrediantunit"
onChange={(e) =>
setIngrediantMeasurementUpdate(e.target.value)
}
></input>
</fieldset>
<fieldset>
<button type="submit">add</button>
</fieldset>
</form>
</div>
))}
</div>
</div>
);
});

我有另一个表单，允许用户将配料添加到他们的配方中

export const IngrediantsForm = memo(() => {
const dispatch = useDispatch();
const [ingredientName, setIngrediantName] = useState("");
const [ingredientMeasurement, setIngrediantMeasurement] = useState();
const [ingredientUnit, setIngrediantUnit] = useState("");
const onFormSubmit = useCallback(
(e) => {
e.preventDefault();
dispatch(
addIngredients({
ingredientName,
ingredientMeasurement,
ingredientUnit,
id: uuidV4(),
})
);
setIngrediantName("");
setIngrediantMeasurement("");
setIngrediantUnit("");
},
[ingredientName, ingredientMeasurement, ingredientUnit, dispatch]
);
return (
<form onSubmit={onFormSubmit}>
<fieldset>
<input
className="border-2"
type="text"
value={ingredientName}
id="ingrediantname"
onChange={(e) => setIngrediantName(e.target.value)}
></input>
</fieldset>
<fieldset>
<input
className="border-2"
type="number"
value={ingredientMeasurement}
id="ingrediantmeasurement"
onChange={(e) => setIngrediantMeasurement(e.target.value)}
></input>
</fieldset>
<fieldset>
<input
className="border-2"
type="text"
value={ingredientUnit}
id="ingrediantunit"
onChange={(e) => setIngrediantUnit(e.target.value)}
></input>
</fieldset>
<fieldset>
<button className="border-2" type="submit">
add
</button>
</fieldset>
</form>
);
});

我不完全确定如何访问状态(即成分列表(，然后向对象添加另一个键/值，这样我就有了一个称为ingredientMeasurement的键和另一个名为ingredient MeasurementUpdate的键。我认为问题是它没有更新正确成分的ingredientMeasurementUpdate，可能是因为它不知道我需要更新哪一种。

我似乎在Redux DevTools上得到的是：

ingredientList: {
ingrediants: {
'0': {
ingredientName: 'Apples',
ingredientMeasurement: '100',
ingredientUnit: 'g',
ingredientMeasurementUpdate: 0,
id: '455ed39b-57b9-4351-98a7-5845cae676b5'
},
'1': {
ingredientName: 'Flour',
ingredientMeasurement: '650',
ingredientUnit: 'g',
ingredientMeasurementUpdate: 0,
id: 'e96349a1-e8ea-4cc6-aa68-6fbfc42ff87b'
},
ingredientMeasurementUpdate: '250'
}
}

Answer 1

问题是在updateFields操作中，您必须传递有效负载中的特定中介id，才能更新数组中的特定介。

用以下代码更改整个代码：

updateFields: (state, action) => {
let index=state.ingrediants.findIndex((i)=>i.id===action.payload.id);
if(index!=-1) {
state.ingrediants[index]={...action.payload}
}
},

Answer 2

在addIngredients中使用state.inmediants.push(有效载荷(