首页 > 解决方案 > TypeError:无法读取未定义 Reactjs 的属性“地图”

问题描述

React 的新手,我再次需要帮助 - 一切都很好,直到我将代码从 App.js 转移到单独的组件 - 而且 b/c 它是无状态组件,我正在使用 props 和 map 函数来访问来自 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;

标签: reactjsdictionarycomponents

解决方案


这只是意味着您没有recipes正确地作为您 render 的道具传入<Recipes />。要么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;

推荐阅读