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 中的值是什么
毫不费力，即使是在这里发布的内容......

标签： javascript node.js reactjs

【解决方案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 的位置，并查看您是否正确执行此操作。

【讨论】：