我对 React 还很陌生，我正尝试从 food2fork api 中引入数据，但出现了错误

TypeError: Cannot read property 'map' of undefined

如果我 撤消此代码 ，则错误为零。此代码是 主要 发生错误的地方

{recipes.map (recipe => {
    return <Recipe key={recipe.recipe_id} recipe={recipe}
    />;
  })}

RecipeList.js 的完整页面

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

export default class RecipeList extends Component {
    render() {
        const { recipes } = this.props;
        return (
            <React.Fragment>
                <RecipeSearch />
                <h1>Recipe List</h1>
                <div className="container my-5">
                    {/* title */}
                    <div className="row">
                        <div className="col-10 mx-auto col-md-6 text-center text-uppercase mb-3">
                            <h1 className="text-slanted">Recipe List</h1> 
                        </div>
                    </div>
                    {/* end title */}
                    <div className="row">
                        {recipes.map (recipe => {
                            return <Recipe key={recipe.recipe_id} recipe={recipe}
                            />;
                        })}
                    </div>
                </div>

                <Recipe />
            </React.Fragment>
        );
    }
}

在 App.js 中：

render(){
    console.log(this.state.recipes);

    return (
      <React.Fragment>
        <RecipeList />
        <RecipeDetails />
      </React.Fragment>
    );
 }