Question

我正在尝试找出我的React js页面中的错误

我尝试了不同的操作，例如将其更改为状态组件，return和render语句等。但是它仍然给我

“ TypeError：无法读取未定义的属性'map' 菜谱 src / components / 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

正如安德鲁（Andrew）在评论中指出的那样，听起来服务器发出的响应是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>
  );

}

当我尝试渲染物品地图时发生错误

1 个答案: