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

Question

我正在尝试使用 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>
}

Answer 1

localhost:8000 位于 PC 上，手机也有自己的本地主机，没有应用程序运行.

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

在 cmd > ipconfig

中找到

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

nextjs: Error in mobile devices while fetching data on client side using swr

next.js

swr