Question

我正在尝试在屏幕上呈现项目列表但收到错误：

Cannot read property 'map' of undefined

我的代码中缺少什么/做错了什么？

import React, {Component} from 'react';
import RecipeListItem from  './RecipeListItem';

const RecipeList = ({recipes}) => {

    const Items = recipes.map((recipe) => {
      return <RecipeListItem key={recipe.id} recipe={recipe} />
    });

    return (
        <div>
            {Items}
        </div>
    )
}

export default RecipeList

Answer 1

我强烈建议不要将整个父状态传递给孩子 - 将其设置为：

在App.js中，像这样传递道具：

<RecipeList recipes={this.state.recipes} />

然后只在孩子中引用props -

const RecipeList = (props) => {

    const Items = props.recipes.map((recipe) => {
      return <RecipeListItem key={recipe.id} recipe={recipe} />
    });

    return (
        <div>
            {Items}
        </div>
    )
}

export default RecipeList

问题呈现反应中的项目列表

1 个答案: