时间戳

首页 > 解决方案 > NextJS SWR 多个 API 调用返回未定义

reactjs - NextJS SWR 多个 API 调用返回未定义

问题描述

因此，当我尝试使用 SWR 库从 API 端点获取数据时，我只能获得第一个获取器函数来返回数据......如果我在浏览器中检查它们但在代码 data1、2、3 中检查它们，所有 API 端点都可以正常工作,4 如果我对它们进行控制台记录，它们都返回未定义，我是否没有正确使用这个库来获取多个 API？

 const fetcher = async () => {
          const response = await fetch("API");
          const data = await response.json();
          return data;
        };
        
        const fetcher1 = async () => {
          const response1 = await fetch("API");
          const data1 = await response1.json();
          return data1;
        };
        
        const fetcher2 = async () => {
          const response2 = await fetch("API");
          const data2 = await response2.json();
          return data2;
        };
        
        const fetcher3 = async () => {
          const response3 = await fetch("API");
          const data3 = await response3.json();
          return data3;
        };
        
        const fetcher4 = async () => {
          const response4 = await fetch("API");
          const data4 = await response4.json();
          return data4;
        };
        
        export default function Dashboard(props) {
          const {data, error} = useSWR("name1", fetcher);
          const {data1, error1} = useSWR("name2", fetcher1);
          const {data2, error2} = useSWR("name3", fetcher2);
          const {data3, error3} = useSWR("name4", fetcher3);
          const {data4, error4} = useSWR("name5", fetcher4);
        
          if (error) return "Error";
          if (!data) return "Loading";
        
          console.log(data);
          return (
               <div>{data.name}</div>
          )

标签： reactjsnext.js

解决方案

请注意，useSWR 始终将数据返回为data，而不是data1或data2。

您正在以错误的方式破坏对象。事实上它应该像

const { data: data1, error: error1 } = useSWR('name2', fetcher1)

推荐阅读