Question

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;

Answer 1

这只是意味着您没有正确传递laravel new --force .作为渲染recipes的道具。 <Recipes />为空或格式错误。

例如：

recipes

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;

话虽这么说，但我对编写组件方式的猜测是，如果您要调解道具，您会发现它实际上与配方相同，这就是为什么未定义cipes.recipes的原因。

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

2 个答案: