nextjs：使用 swr 在客户端获取数据时移动设备出错答案

【问题标题】：nextjs: Error in mobile devices while fetching data on client side using swrnextjs：使用 swr 在客户端获取数据时移动设备出错
【发布时间】：2021-09-09 18:42:19
【问题描述】：

我正在尝试在nextjs 中使用swr 实现客户端数据获取。我可以在我的桌面浏览器中显示使用useSWR 钩子获取的数据。然后，我从我的桌面在本地主机上提供该应用程序，并尝试在我的移动浏览器上通过 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>
}

【问题讨论】：

标签： next.js swr

【解决方案1】：

localhost:8000 位于 PC 上，手机也有自己的 localhost，没有运行任何应用程序。

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

在 cmd > ipconfig

上找到它

【讨论】：

哦，是的，完全忘了考虑这个逻辑。我明白你的意思。谢谢。