NextJS使用SWR调用多个API仅首个返回数据其余为undefined

• 第一个错误：useSWR 返回值的解构方式错误
  SWR 所有调用返回的对象属性名都是固定的data、error、isLoading等，不会自动根据调用顺序生成data1、error1这类自定义属性。你直接解构{data1, error1}时，SWR 返回的对象中不存在对应属性，自然得到undefined。
  正确写法是在解构时给属性重命名：

const { data: data, error: error } = useSWR("name1", fetcher);
const { data: data1, error: error1 } = useSWR("name2", fetcher1);
const { data: data2, error: error2 } = useSWR("name3", fetcher2);
const { data: data3, error: error3 } = useSWR("name4", fetcher3);
const { data: data4, error: error4 } = useSWR("name5", fetcher4);

• 第二个错误：加载判断逻辑只覆盖了第一个请求
  你当前的判断逻辑只检查了第一个请求的error和data，只要第一个请求加载完成，不管剩下四个请求是否加载完成，都会直接进入后续的渲染逻辑，此时剩下的四个请求还没返回结果，data1到data4自然是undefined。
  正确的加载判断需要覆盖所有请求：

if (error || error1 || error2 || error3 || error4) return "Error";
if (!data || !data1 || !data2 || !data3 || !data4) return "Loading";

你不需要为每个 API 单独写 fetcher 函数，SWR 会自动把第一个参数（请求key）作为参数传递给 fetcher，你可以复用同一个 fetcher，简化代码：

// 复用的通用fetcher
const fetcher = (url) => fetch(url).then(res => res.json());

export default function Dashboard(props) {
  // 直接把API地址作为key传给useSWR即可
  const { data, error } = useSWR("你的第一个API地址", fetcher);
  const { data: data1, error: error1 } = useSWR("你的第二个API地址", fetcher);
  const { data: data2, error: error2 } = useSWR("你的第三个API地址", fetcher);
  const { data: data3, error: error3 } = useSWR("你的第四个API地址", fetcher);
  const { data: data4, error: error4 } = useSWR("你的第五个API地址", fetcher);

  // 后续逻辑不变
}

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