javascript - react ；无法读取 render > return() 内未定义的属性

Question

我有一个简单的 React 项目，简而言之就像一个小餐馆。并且餐厅只有在所有食材齐备的情况下才能提供某些菜肴。

所以我写了一些东西来检查每道菜的所有成分是否可用/真实。但在我的 JSX 中，我收到以下错误 TypeError: Cannot read property 'status' of undefined (提供屏幕截图)。

但是，您可以在 //1. 处看到我有一个 console.log，状态属性已定义。

链接到我的公共(public)存储库:https://github.com/danny-faith/dynamenu/tree/update/ingre-object

使用update/ingre-object分支

成分对象

const ingredients = {
  egg: {
    status: true
  },
  beef: {
    status: false
  }
}

菜单对象

const food = {
  item1: {
    name: "Spaghetti Carbonara",
    desc: "With egg yolk and guanciale",
    price: 1724,
    ingredients: ['spaghetti','egg','pancetta'],
    status: "available"
  }, ...
}

JSX 中的代码

{
    Object.keys(this.state.menu).map(key => {
        console.log(this.state.ingredients['egg'].status); // 1.
        if (menu[key].ingredients.some(val => this.state.ingredients[val].status === true) ){
            return <MenuItem key={key} data={menu[key]} />
        }
    })
}

Answer 1

我不知道你在哪里设置了状态，但是可以通过添加检查 state.ingredients 来避免此错误，如下所示。

if (menu[key].ingredients
              .every(val => {
                   return this.state.ingredients[val] ? 
                      this.state.ingredients[val].status === true : 
                      false;
              })){
            return <MenuItem key={key} data={menu[key]} />
}

更好的做法是将 if 条件置于单独的函数中。

编辑，添加额外的右括号来完成 .some() 函数。