React中使用setInterval更新state数组后页面未显示新值问题

核心问题根因 #

你遇到的是React状态更新的典型问题：未遵循不可变数据更新规则，React通过浅比较state的引用判断是否需要触发重渲染，如果你直接修改原state数组/对象的属性再将同一个引用赋值回state，React会判定状态无变化，跳过渲染流程。你在控制台看到数值更新是因为对象引用本身的属性被修改，但React没有检测到状态变更。

解决方案 #

1. 采用不可变方式更新state #

更新患者列表时必须返回全新的数组实例，修改的患者项也要返回全新的对象实例，参考写法：

// 正确更新写法，用函数式更新获取最新的历史state
setPatientList(prevList => {
  return prevList.map(patient => {
    // 匹配到要更新的患者时返回新对象
    if (patient.id === 目标患者ID) {
      return {
        ...patient, // 保留原有属性
        heartRate: Math.floor(Math.random() * 30) + 60, // 示例：更新心率
        spo2: Math.floor(Math.random() * 5) + 95 // 示例：更新血氧
      }
    }
    // 未匹配的患者直接返回原项即可
    return patient
  })
})

2. 修正定时器注册逻辑 #

避免闭包陷阱，定时器请放在useEffect中注册，并添加清理逻辑，配合上面的函数式状态更新，无需将患者列表加入依赖项：

useEffect(() => {
  // 每秒更新一次体征数据
  const timer = setInterval(() => {
    setPatientList(prevList => {
      // 此处插入上述的不可变更新逻辑
    })
  }, 1000)

  // 组件卸载时清理定时器，避免内存泄漏
  return () => clearInterval(timer)
}, [])

3. 检查列表渲染的key绑定 #

渲染患者列表时，不要用数组下标index作为key，请使用患者的唯一标识（如患者ID）作为key，避免React Diff算法判断错误导致不更新：

// 正确写法
{patientList.map(patient => (
  <PatientCard 
    key={patient.id} 
    data={patient}
  />
))}

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