Ошибка при попытке отобразить карту предметов

Question

Я пытаюсь выяснить, где моя ошибка на моей странице ответа js

Я пробовал разные вещи, такие как преобразование его в компонент состояния, операторы return и render и т. Д. Но это все равно дает мне

"TypeError: Невозможно прочитать свойство 'map' из неопределенного Рецепты SRC / компоненты / Recipes.js: 4 1 | импорт React из "реакции"; 2 | 3 | Const Recipes = (реквизит) => ( 4 | 5 | {props.recipes.map ((recipe) => { 6 | вернуть ( 7 | Посмотреть скомпилировано "

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import InputForm from "./components/InputForm";
import Recipes from "./components/Recipes"

const API_KEY= "mykey";

class App extends Component {

  state= {
    recipes: []
  }

  getRecipe  = async (e) => {
  e.preventDefault();
  const recipeName = e.target.elements.recipename.value;
  const api_call = await fetch(`https://www.food2fork.com/api/search?key=${API_KEY}&q=${recipeName}&page=2`)

  const data = await api_call.json();
  this.setState({ recipes: data.recipes });
}
  render() {
    return (
      <div className="App">
        <header className="App-header">
          React Cookbook
        </header>
        <InputForm getRecipe={this.getRecipe} />
       <Recipes recipes={this.state.recipes} />
      </div>
    );
  }
}

export default App;

Recipes.js

import React from "react";

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

export default Recipes;

Answer 1

Как отмечает Эндрю в комментариях, похоже, что ответ от сервера равен undefined, и это то, что добавляется к объекту состояния рецептов. Вы можете проверить это в консоли. Например, допустимы ли ваш ключ API и имя рецепта? Вы обращаетесь к правильной части возвращенных данных?

Кроме того, recipes в state пусто при первом рендере. Вы должны проверить эту возможность в своем коде. Здесь я просто возвратил пустой div, но вы можете вместо этого добавить туда загрузочный счетчик или что-то еще, чтобы предоставить пользователю полезную обратную связь.

render() {

  const { recipes } = this.state;

  if (!recipes.length) return <div />;

  return (
    <div className="App">
      <header className="App-header">
        React Cookbook
      </header>
      <InputForm getRecipe={this.getRecipe} />
      <Recipes recipes={recipes} />
    </div>
  );

}