这仅意味着您没有正确传入 recipes 作为渲染 <Recipes /> 的 prop。 recipes 为空或格式不正确。

例如：

// App.js

import React from 'react';

const App = () => {
  const recipes = [{
    recipe_id: '<id>',
    image_url: '<some url>',
    title: 'Lé title'
  }];

  // recipes could be null/undefined or not even passed as a prop

  return (
    <Recipes recipes={recipes} />
  );
}
export default App;

因此，如果无法看到您如何传递 props 以及它们到底包含什么数据，就很难确切地知道发生了什么。您收到的错误意味着您实际上没有正确发送配方数组。

老实说，我再也不会在 React 中使用无状态函数了，因为 PureComponent 通常表现更好，因为它内置了 shouldComponentUpdate，可以防止不必要的重新渲染。所以这是我编写该组件的方式：

import React, { PureComponent } from 'react';

class Recipes extends PureComonent {
  recipeList = () => {
    const recipes = this.props;
    const recipeArray = recipes.map((recipe) => {
      <div key={recipe.recipe_id}>
        <img src={recipe.image_url} alt={recipe.title} />
        <p>{recipe.title}</p>
      </div>
    });
    return recipeArray;
  }

  render () {
    return () {
      <div>
        {this.recipeList()}
      </div>
    }
  }
}

export default Recipes;

话虽如此，我猜测您编写组件的方式是，如果您要控制台输出 props，您会发现它实际上等于配方，这就是 Recipes.recipes 未定义的原因。