ReactJs:::Cannot read property 'map' of undefined

Posted 2023-03-07

【中文标题】ReactJs:::Cannot read property \'map\' of undefined

【英文标题】：ReactJs:::Cannot read property 'map' of undefinedReactJs:::Cannot read property 'map' of undefined

【发布时间】：2020-01-21 14:01:16

【问题描述】：

   5 | const Recipes = props => (
   6 |   <div className="container">
>  7 |     <div className="row">
   8 |       props.recipes.map((recipe) => 
   9 |        return(
  10 |          <div key=recipe.title className="col-md-4" style= marginBottom:"2rem" >

【问题讨论】：

props.recipes 是undefined

向我们展示您的代码。 recipes 或 props 中的值是什么

毫不费力，即使是在这里发布的内容......

【参考方案1】：

检查您是否正确地将recipes 作为道具传递给组件。

Cannot read property 'map' of undefined 表示props 不包含名为recipes 的对象/数组/任何东西，因此当它尝试map 处理不存在的东西时，它不知道该怎么做并且摔倒了。

---

在这个例子中，recipes 被正确传递（并且它不应该失败）：

const Element = (props) => <div>
  props.recipes.map(recipe => <p>recipe</p>)
</div>

<Element recipes=["egg", "sausage"] />

在这个例子中，它会失败：

const Element = (props) => <div>
  props.recipes.map(recipe => <p>recipe</p>)
</div>

<Element />

recipes 可以通过多种方式未定义。这只是一个。您需要检查您的代码并找到您希望通过recipes 的位置，并查看您是否正确执行此操作。