React中如何实现每隔10秒自动刷新API数据并重新渲染？

你可以直接按以下代码调整现有逻辑：

useEffect(() => {
  const fetchData = async () => {
    // 加请求锁，避免前一次请求未完成时重复调用
    if (isLoading) return
    setIsLoading(true)
    try {
      const response = await coinGecko.get("/coins/markets", {
        params: {
          vs_currency: "usd",
          ids: watchList.join(","),
        }
      })
      setCoins(response.data)
    } catch (error) {
      // 可自行替换为项目内的错误提示逻辑
      console.error("数据拉取失败：", error)
    } finally {
      setIsLoading(false)
    }
  }

  // 页面首次加载立刻执行一次请求
  fetchData()
  // 设置10秒间隔的轮询定时器
  const pollTimer = setInterval(fetchData, 10 * 1000)

  // 组件卸载时清除定时器，防止内存泄漏
  return () => clearInterval(pollTimer)
// 依赖项添加watchList，关注列表变动时自动重启轮询拉取新数据
}, [watchList])

核心调整说明 #

• 新增setInterval定时器实现10秒间隔重复触发请求，setCoins更新状态后会自动触发页面重新渲染
• 新增useEffect清理函数，组件卸载/依赖变动时主动销毁定时器，避免内存泄漏和无效请求
• 新增请求锁和异常捕获逻辑，避免请求堆叠、接口报错导致的状态异常
• 依赖数组补充watchList变量，保证关注列表变动后拉取的是对应最新的币种数据

内容的提问来源于stack exchange，提问作者AllanOnAir