NextJS 13组件useEffect依赖问题：singleRecipe未定义时更新本地状态

针对你遇到的问题，只需对代码做两处关键调整即可解决：

1. 修复第一个useEffect的无限循环问题
   原代码中第一个useEffect没有依赖数组，会在组件每次渲染时重复执行，造成不必要的状态更新。需要将recipes和recipeID加入依赖数组，确保仅当这两个值变化时才重新查找并设置singleRecipe。

2. 在第二个useEffect中增加存在性判断
   当singleRecipe未定义时，跳过ingredientsArr的更新操作，避免因访问singleRecipe.ingredients导致的报错。

修改后的代码如下：

// 第一个useEffect：添加依赖数组，避免无意义重复执行
useEffect(() => {
  const foundRecipe = recipes.find(({id}) => id === Number(recipeID));
  setSingleRecipe(foundRecipe);
}, [recipes, recipeID]);

// 第二个useEffect：仅在singleRecipe存在时更新本地状态
useEffect(() => {
  // 使用可选链操作符安全访问属性，避免undefined报错
  if (singleRecipe?.ingredients) {
    setIngredientsArr(JSON.parse(singleRecipe.ingredients));
  }
}, [singleRecipe]);

额外说明：

• 可选链操作符?.是React项目中处理空值的常用方式，若你的环境不支持（NextJS 13默认支持），也可以用传统条件判断：if (singleRecipe && singleRecipe.ingredients)。

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