React项目无法展示Spoonacular API数据且出现重复请求问题

问题根源&修复方案 #

1. 接口无限调用、重复打印多条数据的原因 #

你的useEffect依赖数组中传入了food状态：每次请求完成调用setFood更新food后，会触发useEffect重新执行，再次发起接口请求，形成死循环，所以每次都会拿到新的随机食物数据、重复打印。
同时setFood是异步更新方法，调用setFood后立刻打印food拿到的是更新前的旧状态，不符合调试预期。

2. 食物标题无法显示的原因 #

spoonacular随机菜谱接口的返回结构如下：

{
  "recipes": [
    { /* 单条菜谱数据，包含title等字段 */ }
  ]
}

你直接把完整返回对象response.data存入了food，这个对象本身没有title字段，title在recipes数组的第一项中，所以子组件取值为空。

完整修复代码 #

Home.js修改后

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

// 注意实际代码中把&替换为&，此处是原代码HTML转义导致的问题
const URL = `https://api.spoonacular.com/recipes/random?apiKey=${APIKey}&number=1`;

function Home() {
  // 初始值设为null方便后续条件判断
  const [food, setFood] = useState(null);
  // 依赖数组改为空，仅组件挂载时请求一次
  useEffect(() => {
    axios
      .get(URL)
      .then(function (response) {
        // 直接取返回的菜谱数组第一项
        setFood(response.data.recipes[0]);
        // 要调试打印直接打接口返回值即可
        console.log(response.data.recipes[0]);
      })
      .catch(function (error) {
        console.warn(error);
      });
  }, []);

  // 数据未返回时可以显示加载态
  if (!food) return <main>加载中...</main>

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

export default Home;

Recipe.js兼容优化（可选）

加可选链避免取值报错：

import React from "react";

function Recipe({ recipeList }) {
  return (
    <div className="recipeCard">
      <h1>{recipeList?.title}</h1>
    </div>
  );
}

export default Recipe;

内容的提问来源于stack exchange，提问作者mw3981