TypeError:无法读取属性'；地图'；未定义Reactjs的定义

新手反应，我再次需要帮助-一切都很好，直到我将代码从App.js转移到单独的组件-b/c它是无状态组件，我使用道具和映射功能访问App.js的值和状态，但它不高兴-请帮助

import React from 'react';

const Recipes = props => (
  <div>
    {props.recipes.map(recipe => (
        <div key={recipe.recipe_id}>
          <img src={recipe.image_url} alt={recipe.title} />
          <p>{recipe.title}</p>
        </div>
    ))}
    </div>
);

export default Recipes;

从“React”导入React；
常量配方=道具=>(
{props.recipes.map（recipe=>(
{recipe.title}

))}
);
导出默认配方；

这只是意味着，在渲染

时，您不能正确地将

配方作为道具传递。
配方
为空或格式不正确

例：

//App.js
从“React”导入React；
常量应用=（）=>{
常量配方=[{
配方id:“”，
图像url:“”，
标题：“Létitle”
}];
//配方可以为空/未定义，甚至不能作为道具传递
返回(
);
}
导出默认应用程序；
因此，如果看不到道具是如何传递的，以及道具包含的数据，就很难准确地知道发生了什么。您得到的错误意味着您实际上没有正确发送recipes数组

老实说，我再也不在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;

import React，{PureComponent}来自'React'；
类Recipes扩展了purecomont{
recipeList=（）=>{
const recipes=this.props；
const reciparray=recipes.map（（recipe）=>{
{recipe.title}

});
回执回执；
}
渲染（）{
返回（）{
{this.recipeList（）}
}
}
}
导出默认配方；

话虽如此，我对您编写组件的方式的猜测是，如果您将道具放在控制台上，您会发现它实际上等于recipes，这就是recipes.recipes未定义的原因。
因此状态是一个空的
recipe数组。我如何传递它
，所以当我想通过
props>将它传递给组件时，`is应该可以访问主组件中的
状态
？？不是吗？还是我把概念搞错了@布伦顿我认为你正确理解了这个概念，但我不确定到底是什么错了。您是否可以发布要在其中渲染的父组件？如果我能看到这一点，我可能会提供更多帮助。如果您想了解状态如何从父级开始工作，这里有一个小的代码沙盒。我为App.js和recipes.js添加了代码谢谢@brandoni在您的代码沙盒中，组件中的状态是
recipe
，而不是
recipes
。当您传递
this.state.recipe
时，实际上传递的是未定义的。它应该是
this.state.recipes
确切地说，所以道具在主组件的控制台中为我提供了所需的数组。但是，一旦我将它分离到不同的组件中，它是无状态的，我可以使用函数方法而不是类，我仍然可以通过传递props作为参数从main访问状态？我抓住这个概念有什么地方错了吗？
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;