为什么我的api数据只显示一次，刷新页面就报错

Question

我正在开发一个显示随机食物标题和该食物图像的项目。我无法弄清楚为什么数据只在页面上显示一次，并且一旦刷新页面，就会出现“未捕获的类型错误：recipeList.recipes 未定义”的错误。

这是我的家.js

import React, { useEffect, useState } from "react";
import axios from "axios";
import Recipe from "../components/Recipes";

const URL = `https://api.spoonacular.com/recipes/random?apiKey=${APIKey}&number=1`;

console.log(URL);

function Home() {
  const [food, setFood] = useState({});

  useEffect(() => {
    axios
      .get(URL)
      .then(function (response) {
        setFood(response.data);
      })
      .catch(function (error) {
        console.warn(error);
      });
  }, []);

  return (
    <main>
      <Recipe recipeList={food} />
    </main>
  );
}

export default Home;

这是我的 Recipe.js 组件

import React from "react";

function Recipe({ recipeList }) {
  return (
    <div className="recipeCard">
      <h1>{recipeList.recipes[0].title}</h1>
      <img src={recipeList.recipes[0].image} alt="Food" />
    </div>
  );
}

export default Recipe;

Answer 1

您应该验证您的数据

food

是否不为空或为空，这里是一个例子：

<main>
     {food &&
      <Recipe recipeList={food} />}
</main>

首先你需要在useeffect中加载数据

useEffect(() => {
const loadData=()=>{
    axios
      .get(URL)
      .then(function (response) {
        setFood(response.data);
      })
      .catch(function (error) {
        console.warn(error);
      });
}
if(!food){ // just for dont load empty data -->setFood(response.data)
loadData()
}
  }, []);

您正在加载空数据当您重新加载页面时

Answer 2

rn3w 比我先一步。错误消息表明

recipeList.recipes

不存在，这是正确的，因为当初始化

Recipe

组件时，

recipeList

（来自

food

组件的

Home

）被设置为

{}

。

数据仅在页面上显示一次，一旦刷新页面，就会出现错误...

令我困惑的是为什么数据第一次显示在页面上！看起来应该从错误消息开始。

Answer 3

您使用的依赖项数组 [] 为空， 因此只有第一个电话有效。