Question

   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" }}>

Answer 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的地方，然后查看您是否正确通过了此操作。

ReactJs :::无法读取未定义的属性“ map”

1 个答案: