React中useEffect无限触发页面渲染，改空依赖后无法自动更新如何优化？

• 初始代码将problemsData设为useEffect依赖项，而回调内部的setProblemsData会修改这个状态值，触发依赖项变更后又会重新执行useEffect，因此形成无限循环，导致页面持续重复渲染。
• 改为空数组依赖后，useEffect仅会在组件首次挂载完成后执行1次，后续只要组件不重新挂载，就不会再发起请求拉取最新数据，因此后端数据更新后前端无法感知。

根据你的业务实时性需求选择对应方案即可：

方案1：手动触发刷新（最常用，适用于大部分场景） #

把请求逻辑封装为独立函数，除了首次挂载执行1次外，仅在需要更新数据时（比如点击刷新按钮、新增/删除题目操作完成后）手动调用：

const [problemsData, setProblemsData] = useState([])

// 封装数据拉取逻辑
const fetchProblems = () => {
  axios.get("http://localhost:3001/problems").then((resp) => {
    setProblemsData(resp.data)
  })
}

// 首次挂载拉取一次数据
useEffect(() => {
  fetchProblems()
// 此处为空数组是符合预期的，如果ESLint报依赖警告，可加下一行注释忽略
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

// 示例：给刷新按钮绑定点击事件即可手动刷新
// <button onClick={fetchProblems}>刷新题目列表</button>

方案2：定时轮询（适用于需要弱自动同步的场景） #

如果需要页面打开后自动同步后端最新数据，对实时性要求不高，可加定时器定时拉取：

useEffect(() => {
  const fetchProblems = () => {
    axios.get("http://localhost:3001/problems").then((resp) => {
      setProblemsData(resp.data)
    })
  }
  // 首次加载先拉取一次
  fetchProblems()
  // 每30秒拉取一次最新数据，可根据需求调整时间间隔
  const timer = setInterval(fetchProblems, 30 * 1000)
  // 组件卸载时清除定时器，避免内存泄漏
  return () => clearInterval(timer)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

方案3：WebSocket主动推送（适用于实时性要求高的场景） #

如果需要后端数据更新后立刻同步到前端，可在后端对接WebSocket服务，前端建立长连接监听数据变更事件，收到推送后直接更新problemsData即可，无需频繁发起HTTP请求浪费资源。

内容的提问来源于stack exchange，提问作者Никита Шапаренко