next.js 下一个js和客户端数据获取

vmpqdwk3 于 2023-04-20 发布在其他

关注(0)|答案(1)|浏览(113)

我想从客户端向服务器发出一个请求，但问题是，如果我在控制台中重新加载页面，我会得到一个空数组，如果我在代码中更改了一些东西（开始编译），那么客户端会收到数据，这个问题可以解决吗？

const router = useRouter()
const { id } = router.query
const URL = `http://localhost:4500/theme/${id}`

useEffect(() => {
    async function fetchData() {
        if (id) {
            setLoad(true)
            const response = await fetch(URL)
            const data = await response.json()
            setData(data)
            setLoad(false)
        }
    }
    fetchData()
}, [])

next.js

来源：https://stackoverflow.com/questions/76039189/next-js-and-client-data-fetching

1条答案

按热度按时间

pokxtpni1#

你的“useEffect”可能是问题的原因。当组件第一次呈现时，它只运行一次。当组件重新呈现时，fetch请求只被调用一次，不会更新。你可能想尝试像这样将你的“id”添加到“useEffect”数组中：

useEffect(() => {
  
}, [id])

添加一些错误处理也是一个好主意。请参阅下面修改的代码：

const router = useRouter()
const { id } = router.query
const URL = `http://localhost:4500/theme/${id}`

const [data, setData] = useState([])
const [loading, setLoading] = useState(true)
const [error, setError] = useState(null)

useEffect(() => {
  async function fetchData() {
    try {
      if (id) {
        setLoading(true)
        const response = await fetch(URL)
        const data = await response.json()
        setData(data)
        setLoading(false)
      }
    } catch (error) {
      setError(error)
      setLoading(false)
    }
  }
  fetchData()
}, [id])

if (loading) {
  return <div>Loading...</div>
}

if (error) {
  return <div>Error: {error.message}</div>
}

return <div>{JSON.stringify(data)}</div>

每当“id”属性发生变化时，这将启动一个检索请求，使组件能够更新并显示更新后的数据。您还可以添加您喜欢的加载动画以获得更好的可视化效果。

赞(0）回复(0）举报 2023-04-20

我来回答

next.js 下一个js和客户端数据获取

1条答案

相关问题

热门标签

最新问答