React函数组件中useEffect引发console.log无限循环问题求助

你的代码出现无限循环的核心原因是useEffect没有设置依赖数组：

• 默认情况下，不带依赖数组的useEffect会在组件每次渲染（包括state更新触发的重渲染）时执行
• 你在effect里调用了setDetail，更新state会触发组件重新渲染，进而再次执行effect，形成无限循环

修复方案： #

1. 给useEffect添加依赖数组，只在id变化时发起请求（因为路由参数id是获取对应食物详情的唯一标识，只有它变化时才需要重新请求）
2. 修正console.log(detail)的时机：由于setDetail是异步操作，在then里直接打印detail拿到的是更新前的旧值，若要查看更新后的state，可单独加一个监听detail的useEffect

修改后的完整代码： #

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";

export default function FoodDetail() {
  const { id } = useParams();
  const [detail, setDetail] = useState([]);

  // 仅在id变化时发起API请求
  useEffect(() => {
    axios
      .get(`http://localhost:3004/foods/${id}`)
      .then((res) => {
        setDetail(res.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, [id]); // 添加依赖数组，指定id为依赖项

  // 监听detail变化，打印更新后的值
  useEffect(() => {
    console.log(detail);
  }, [detail]);

  return (
    // 补充你的渲染内容，示例展示detail信息
    <div>
      <h1>{detail.name}</h1>
      <p>{detail.description}</p>
    </div>
  );
}

额外说明： #

• 依赖数组是useEffect的关键配置，它决定了effect何时重新执行，务必根据实际需求设置正确的依赖项
• 如果你的请求只需要在组件挂载时执行一次，可以给依赖数组传空数组[]，这样effect只会在组件首次挂载时运行一次

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