问handleChange函数导致调度函数返回未定义的
EN

Stack Overflow用户

提问于 2022-10-26 17:06:50

回答 1查看 23关注 0票数 0

我目前正在学习关于useReducer的react。我正在尝试制作一个配方盒，里面有成分，尺寸和数量，你可以通过在文本输入框中输入来改变它们。但是每当我尝试打字时，整个列表就消失了，我就会得到这个错误。

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的链接

javascript

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-10-26 17:49:53

您在formReducer“变更成分”操作中犯了一个小错误。在您的formReducer中，调度操作只返回作为状态的成分。您需要保存当前的配方数据，并且只应该更改配料。

请参阅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;
  }
};

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74211641

复制

相似问题

问handleChange函数导致调度函数返回未定义的
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问handleChange函数导致调度函数返回未定义的EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问handleChange函数导致调度函数返回未定义的
EN