useSWR 未加载数据。数据保持加载状态

Posted 2023-02-27

【中文标题】useSWR 未加载数据。数据保持加载状态

【英文标题】：Data is not loading by useSWR. The data remains in loading state

【发布时间】：2020-08-16 17:14:40

【问题描述】：

今天，我第一次使用 useSWR (by zeit) hook，遇到了 useSWR 在获取后不返回数据的问题。我在git 上上传了我的前端代码。我的快速服务器在http://34.66.137.51:4000 上运行。您可以通过在端点“/”和“/testing”处请求来验证它。代码如下

const express = require('express')
const bodyParser = require('body-parser');
const cors = require('cors');

const app=express();
app.use(cors())
app.use(bodyParser.json());

app.get('/testing',(req,res)=>
    console.log('testing')
    res.status(200).json(["nod":"hello", "next":"hello1"])
)

app.get('/',(req,res)=>
    console.log('asd')
    res.status(200).json('welcome');
);

app.listen(4000,()=>
    console.log("listening on 4000")
)

我向您保证，当服务器控制台将 testing 显示为输出时，fetch 函数会正确调用服务器。我想知道我做错了什么以及如何解决它，以便 data 获得快速服务器的响应。

PS-如果您在理解问题时遇到任何问题，请告诉我。

【参考方案1】：

编辑 1 - 感谢Santiago Ignacio Poli。他在评论中评论了一个非常有效的解决方案。我只是在这里引用它，以便您轻松浏览。

上面的代码不起作用，因为你没有包装你的 fetch 函数内部的代码，因此代码立即执行，即 () => 获取（...）

旧解决方案

我认为只有少数开发人员使用 useSWR，或者我的问题不太清楚。无论如何，让我们来解决问题。

App.js 的旧 useSWR 部分

const data, error = useSWR('http://34.66.137.51:4000/testing',fetch('http://34.66.137.51:4000/testing',
method:'GET',
header: "Content-Type" : "applicaton/json"
)
.then(response=>response.json())

);

我将 App.js 更改如下。

  const data, error = useSWR('http://34.66.137.51:4000/testing',fetcher);

并将 fetcher.js 制作如下

function fetcher(url) 
 return fetch(url, 
  headers: 
   Authorization: `Bearer $localStorage.getItem('token')`,
   'Content-Type': 'application/json',
  ,
 ).then(response => response.json());


export default fetcher;

通过如上所述更改文件，我解决了我的问题。我不知道它为什么起作用或为什么不起作用！如果有人知道，那就做荣誉。谢谢。

【讨论】：

上面的代码不起作用，因为您没有将 fetch 代码包装在函数中，因此代码立即执行，即 () => fetch(...)