TypeError: Невозможно прочитать свойство 'map' из неопределенных Reactjs

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

Так что трудно точно знать, что происходит, не имея возможности увидеть, как вы передаете реквизиты и какие именно данные они содержат. Ошибка, которую вы получаете, подразумевает, что вы на самом деле неправильно отправляете массив recipes.

Честно говоря, я больше никогда не использую функции без сохранения состояния в реакции, потому что 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.recipes не определены.

Answer 2

Это просто означает, что вы не передаете recipes должным образом как реквизит, в котором вы делаете <Recipes />.Либо recipes имеет значение NULL, либо имеет неправильный формат.

ex:

// 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;