我对 React 还很陌生，我试图显示数据 但出现了错误

当我添加一些关于 image_url、title、source_url 等的代码时没有显示任何数据....

TypeError: Cannot read property 'image_url' of undefined

在 Recipe.js 中，

import React, { Component } from 'react'

export default class Recipe extends Component {
    render() {
        const {
            image_url,
            title,
            source_url,
            publisher,
            recipe_id
        } = this.props.recipe;

        return (
            <React.Fragment>
                <h1>Recipe</h1>
                <div className="col-10 mx-auto col-md-6 col-lg-4">
                    <div className="card">
                        <img src={image_url} className="img-card-top" style={{height:"14rem"}} alt="recipe" />
                        <div className="card-body text-capitalize">
                            <h5>{title}</h5>
                            <h6 className="text-warning text-slanted">
                                provided by {publisher}
                            </h6>
                        </div>
                        <div className="card-footer">
                            <button type="button" className="btn btn-outline-primary">Details</button>
                            <a href="{source_url}" className="btn btn-outline-dark mx-2">Recipe url</a>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }
}

在 ReactList.js 中，

<div className="row">
             {recipes.map (recipe => {
                return <Recipe key={recipe.recipe_id} recipe={recipe}
                  />;
             })}
           </div>
       </div>
   <Recipe />
</React.Fragment>