React如何实现API数据变更时自动更新state无需手动触发

你提的两种需求都可以实现，根据是否能修改后端接口，可选择以下两种落地方案：

方案1：定时轮询（实现持续循环调用API，支持手动停止） #

该方案不需要改动现有后端接口，纯前端改造即可实现，逻辑是通过固定间隔的定时器循环调用接口拉取数据，收到停止指令/组件卸载时清除定时器终止循环。
注意不要在定时器回调里直接引用外层的logs状态，会触发闭包陷阱拿到旧值，要用React状态的函数式更新写法规避这个问题。

可直接复用的实现代码：

import { useState, useEffect, useRef, useCallback } from 'react'
import axios from 'axios'
import { v4 as uuidv4 } from 'uuid'

function LogViewer() {
  const [logs, setLogs] = useState([])
  // 存储定时器ID，用于停止轮询
  const timerRef = useRef(null)
  const [isPolling, setIsPolling] = useState(false)
  // 轮询间隔，可根据业务调整，单位毫秒
  const POLL_INTERVAL = 2000

  // 抽离拉取日志逻辑，用函数式更新规避闭包问题
  const fetchLogs = useCallback(async () => {
    try {
      const response = await axios.get("/logs")
      const templog = response.data
      setLogs(prevLogs => {
        const newLogs = [...prevLogs]
        templog.forEach(item => {
          if (item.log?.trim()) {
            newLogs.push({log: item.log, id: uuidv4()})
          }
        })
        return newLogs
      })
    } catch (err) {
      console.error('拉取日志失败:', err)
    }
  }, [])

  // 开始轮询
  const startPolling = useCallback(() => {
    if (timerRef.current) return
    setIsPolling(true)
    // 立即拉一次，不用等第一个时间间隔
    fetchLogs()
    timerRef.current = setInterval(fetchLogs, POLL_INTERVAL)
  }, [fetchLogs])

  // 停止轮询
  const stopPolling = useCallback(() => {
    if (timerRef.current) {
      clearInterval(timerRef.current)
      timerRef.current = null
    }
    setIsPolling(false)
  }, [])

  // 组件卸载时自动停止轮询，防止内存泄漏
  useEffect(() => {
    return () => stopPolling()
  }, [stopPolling])

  return (
    <div>
      <button onClick={startPolling} disabled={isPolling}>开始自动刷新日志</button>
      <button onClick={stopPolling} disabled={!isPolling}>停止自动刷新</button>
      <div className="log-list">
        {logs.map(item => <div key={item.id}>{item.log}</div>)}
      </div>
    </div>
  )
}

方案优缺点 #

• 优点：无需改动后端，接入成本低，逻辑简单易调试
• 缺点：无论后端数据是否更新都会发起请求，间隔太短会浪费带宽和服务端资源，间隔太长会导致数据更新延迟

优化建议：可以给/logs接口增加参数，比如传入当前已加载的最新日志的时间戳/ID，后端只返回该节点之后产生的新日志，减少每次请求的传输数据量，避免重复处理已加载的日志。

方案2：服务端主动推送（真正实现数据变化时自动更新state） #

如果可以修改后端，优先选择这类方案，除了WebSocket，也可以用实现更简单的SSE（Server-Sent Events，基于HTTP的单向推送）。这类方案不需要前端轮询发请求，后端检测到日志更新时主动把新数据推给前端，实时性最高，也没有无效请求浪费资源。

前端WebSocket基础实现代码：

import { useState, useEffect, useRef } from 'react'
import { v4 as uuidv4 } from 'uuid'

function LogViewer() {
  const [logs, setLogs] = useState([])
  const wsRef = useRef(null)
  const [isConnected, setIsConnected] = useState(false)

  const connectWs = () => {
    // 替换为实际的WebSocket服务地址
    const ws = new WebSocket(`ws://${window.location.host}/ws/logs`)
    wsRef.current = ws

    ws.onopen = () => setIsConnected(true)
    ws.onclose = () => setIsConnected(false)
    ws.onerror = (err) => {
      console.error('日志推送连接出错:', err)
      ws.close()
    }
    // 接收后端推送的新日志，直接更新state
    ws.onmessage = (event) => {
      const newLogData = JSON.parse(event.data)
      setLogs(prevLogs => {
        const updated = [...prevLogs]
        // 兼容单条/批量日志推送格式
        const logList = Array.isArray(newLogData) ? newLogData : [newLogData]
        logList.forEach(item => {
          if (item.log?.trim()) {
            updated.push({log: item.log, id: uuidv4()})
          }
        })
        return updated
      })
    }
  }

  const disconnectWs = () => {
    if (wsRef.current) {
      wsRef.current.close()
      wsRef.current = null
    }
  }

  useEffect(() => {
    // 组件挂载时自动建立连接
    connectWs()
    // 组件卸载时断开连接，防止内存泄漏
    return () => disconnectWs()
  }, [])

  return (
    <div>
      <span>日志自动更新状态：{isConnected ? '已连接' : '未连接'}</span>
      <button onClick={disconnectWs} disabled={!isConnected}>停止自动更新</button>
      <button onClick={connectWs} disabled={isConnected}>开启自动更新</button>
      <div className="log-list">
        {logs.map(item => <div key={item.id}>{item.log}</div>)}
      </div>
    </div>
  )
}

原有代码问题说明 #

你之前的写法直接在请求回调里引用外层的logs变量做拼接，不管用轮询还是推送方案，都容易因为闭包拿到旧的状态值，导致日志重复、覆盖等问题，换成setLogs(prevLogs => {})的函数式更新写法就可以彻底规避这个问题。

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