nextjs:使用swr在客户端获取数据时，移动设备出错

Question

我正在尝试使用nextjs中的swr实现客户端数据获取。我能够在我的桌面浏览器中显示使用useSWR挂钩获取的数据。然后，我从桌面在localhost上提供该应用程序，并尝试通过wi-fi在移动浏览器上测试它(两个设备都在同一网络上)。不显示客户端提取的数据。而是返回<Error />组件。

可能的原因是什么？我真的没有看到有人在互联网上提出类似的问题

在useSWRFetch.js中

...
const fetcher = (...args) => axios.get(...args).then(res => res.data)
export const useSWRFetch = (url) => {
const { data, error } = useSWR(url, fetcher)
return { data, error }
}

在ClientFetchedComponent.js中

...
export default function ClientFetchedComponent() {
const { data, error } = useSWRFetch(`http://localhost:8000/api/category/featured`)
if (error) return <Error />

return <div>
{ !data ? 
<Loading /> :
data.results.map(item => {
return <div key={item.id}>
...
...
</div>
})
}
</div>
}

Answer 1

localhost:8000位于PC上，移动设备也有自己的本地主机，没有运行任何应用程序。

如果您想使用另一个具有相同WIFI的设备，请将localhost:8000替换为IPv4地址ex(192.168.1.4:8000)

在cmd>上找到它；ipconfig