TypeError：无法读取未定义的Reactjs的属性“map”

Question

反应的新手和我再次需要帮助 - 一切都很好，直到我将代码从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;

Answer 1

这只是意味着你没有正确传递recipes作为你渲染<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;

Answer 2

因此很难确切地知道发生了什么，而不能看到你如何传递道具，以及它们包含的确切数据。您获得的错误意味着您实际上并未正确发送配方数组。

老实说，我从不再使用无状态函数作为反应，因为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;

话虽如此，我对你编写组件的方式的猜测是，如果你要控制道具，你会发现它实际上等于食谱，这就是为什么recipes.recipes是未定义的。