React过滤对象数组时useRef值被清空 评论持久化方案咨询

用useRef存储评论数据的方案本身不符合React状态驱动的设计逻辑：useRef的核心定位是持有DOM引用、存储不需要触发重渲染的瞬时值。当点击筛选按钮触发列表重渲染时，如果绑定ref的DOM节点被条件渲染卸载、或者列表项的渲染顺序/对应key发生变动，ref.current会被自动置为null，存在ref里的评论数据也会随DOM变动丢失，天然无法支撑评论持久化的需求。

• 顶层统一维护评论状态映射表
  不要为每个文本域单独创建ref存储评论，直接在组件顶层用useState维护一个以业务项唯一ID为键、评论数组为值的映射表，所有评论数据存在React组件状态中，和DOM生命周期完全解耦，不管列表怎么筛选、重渲染、DOM节点怎么卸载重建，数据都不会丢失。
  核心实现代码参考：

  // 组件顶层初始化评论存储
  const [commentMap, setCommentMap] = useState({})
  
  // 给指定项添加评论的通用方法
  const appendComment = (itemId, commentText) => {
    setCommentMap(prev => ({
      ...prev,
      [itemId]: [...(prev[itemId] || []), {
        id: Date.now(),
        content: commentText,
        createTime: new Date().toISOString()
      }]
    }))
  }
  

• 改用声明式渲染替代命令式DOM操作
  删掉之前通过ref.current手动往DOM插入评论的逻辑，渲染对应项的评论区时，直接根据当前项的唯一ID从commentMap中取对应的评论数组，通过数组map的方式渲染评论列表即可。筛选操作触发列表重排、临时过滤再复现时，只要业务项的唯一ID不变，绑定的评论就会自动渲染出来，不会出现丢失问题。
• 如需跨刷新/跨页面持久化，可在commentMap更新时同步将数据写入localStorage，组件初始化时优先从本地缓存读取初始值即可，接入成本极低。

不要使用useRef存储任何需要参与UI渲染、或者需要在重渲染后保留的业务数据：ref值变动不会触发组件重渲染，且绑定DOM的ref会在对应节点卸载时自动置空，天生不适合承载这类业务状态。

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