Next.js13中带async函数的useEffect无法更新状态/响应变化

问题核心 #

你在通过React客户端组件从API获取食谱列表时遇到两个问题：

• 无法成功更新recipes状态
• 依赖数组包含recipes时，useEffect出现不必要的重复执行（甚至无限循环）

已知API接口正常（console.log(ress.recipes)能输出数据），且了解setState是异步操作。

错误定位 #

1. setState调用语法错误 #

你的代码中错误使用数组访问语法调用setState：

setRecipes[ress.recipes]; // 错误写法

setState是React提供的函数，必须通过圆括号调用：

setRecipes(ress.recipes); // 正确写法

这是状态无法更新的直接原因。

2. useEffect依赖数组错误 #

你将recipes加入useEffect的依赖数组，会导致：

• recipes状态更新后，useEffect再次执行
• 重新执行的useEffect会调用getRecipes，再次更新状态
• 最终形成无限循环

由于你只需要在组件挂载时获取一次数据，依赖数组应设为空数组。

修正后的客户端组件代码 #

"use client"
import { useState, useEffect } from "react";

export default function RecipeList() {
  const [recipes, setRecipes] = useState([]);
  
  useEffect(() => {
    async function getRecipes() {
      const res = await fetch("/api/recipes");
      const ress = await res.json();
      setRecipes(ress.recipes); // 修正setState调用方式
      console.log("获取到的食谱数据:", ress.recipes); // 在异步函数内打印接口返回值
    }
    getRecipes();
  }, []); // 空数组：仅在组件挂载时执行一次

  // 若需监听recipes状态变化，可单独添加useEffect
  useEffect(() => {
    console.log("当前recipes状态:", recipes);
  }, [recipes]);
  
  return (
    <div className="font-sans text-3xl">
      {/* 遍历数组渲染食谱，需添加唯一key属性 */}
      {recipes.map(recipe => (
        <div key={recipe.id}>{recipe.name}</div>
      ))}
    </div>
  );
}

额外注意事项 #

1. 状态更新的异步性：setState是异步操作，调用setRecipes后立即console.log(recipes)，打印的仍是更新前的状态。如需查看最新状态，可在异步函数内直接打印接口返回数据，或单独用useEffect监听recipes变化。
2. 列表渲染的key：渲染数组时必须为每个元素添加唯一key属性，避免React渲染警告。
3. API路由的错误处理：你的API路由中使用了alert，但Next.js Route Handler运行在服务器端，alert是浏览器API无法生效，建议改为仅用console.log输出错误，或返回错误状态码。

内容的提问来源于stack exchange，提问作者Saif eldeen Adel