为什么数据从我的api只显示一次，当我刷新页面，它给出了一个错误

Question

我正在做一个显示随机食物标题和该食物图像的项目。我很难弄清楚为什么数据只在页面上显示一次，一旦我刷新页面，它会给出一个错误"Uncaught TypeError: recipeList。食谱未定义

This is my home.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是否为空或null，这里有一个例子:

<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(Home组件中的food)设置为{}。

数据在页面上只显示一次，一旦我刷新页面，它给出一个错误…

令我不解的是为什么数据第一次显示在页面上!似乎应该从错误信息开始。