我目前正在學習有關 useReducer 的反應。我正在嘗試制作一個包含成分、尺寸和數量的食譜框，您可以通過在文本輸入框中鍵入來更改它們。但是每當我嘗試輸入時，整個串列都會消失，并且出現此錯誤
react-dom.js:9
TypeError: Cannot read properties of undefined (reading 'ingredients')
at App (pen.js:63:26)
at Bi (react-dom.js:7:19481)
at ei (react-dom.js:9:3150)
at oa (react-dom.js:9:44778)
at la (react-dom.js:9:39715)
at pf (react-dom.js:9:39646)
at Ir (react-dom.js:9:39506)
at so (react-dom.js:9:36651)
at on (react-dom.js:7:3250)
at Gi (react-dom.js:9:36960)
當我嘗試更改任何文本時，每個食譜似乎都回傳“未定義”。我不明白為什么配方引數在我輸入之前而不是之后有效
這是我的代碼的鏈接https://codepen.io/bl1xvan/pen/eYKmNbm?editors=0010
uj5u.com熱心網友回復：
您在 formReducer "CHANGE INGREDIENT" 動作中犯了一個小錯誤。在您的formReducer, dispatched 動作中，僅將成分作為狀態回傳。您需要保留當前的配方資料，并且只應更改成分。
請參閱以下更改formReducer
const formReducer = (state, action) => {
switch (action.type) {
case "CHANGE_INGREDIENT":
return state.map((recipe) => {
return {
...recipe,
ingredients: recipe.ingredients.map((ingredient) => {
if (ingredient.id === action.id) {
return {
...ingredient,
[action.payload.name]: action.payload.value
};
} else {
return ingredient;
}
})
};
});
default:
return state;
}
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/520568.html
標籤：javascript反应
上一篇：如何將狀態中的文本轉換為小寫