React表单LocalStorage存值后刷新无法回填 如何实现数据持久渲染

• 现有dataLoad方法仅实现了存储数据的控制台打印，没有编写任何值回填逻辑；且window.onload = dataLoad()写法错误，加括号会让函数在代码执行到该行时立即触发，而非等待页面加载完成，此时React大概率还未完成表单DOM渲染，即便写了DOM赋值逻辑也找不到对应元素。
• 现有存储逻辑完全绕开React状态流，通过原生DOM查询取值存储，而你的表单字段完全由父组件传入的props驱动渲染，就算手动给DOM输入框赋值，只要React触发重渲染，DOM值就会被props中的初始值覆盖，无法持久显示。
• 存储时使用元素className作为匹配键存在严重匹配风险，同一个className可能对应多个表单元素，回填时无法精准定位字段。

1. 调整存储逻辑，对齐React状态流 #

不要在表单容器上绑定onChange查DOM存值，直接在表单状态更新的节点同步存储React维护的状态，从根源避免DOM操作和状态不一致问题。
以你现有父组件传参的逻辑为例，在父组件的onDataEntry方法中同步存储：

// 父组件中处理表单值更新的方法
const handleDataEntry = (stateKey, updatedFields) => {
  // 原有状态更新逻辑
  const nextFormState = {
    ...allFormState,
    [stateKey]: updatedFields
  }
  setAllFormState(nextFormState)
  // 同步将最新的React状态存入localStorage，无需查询DOM
  localStorage.setItem("form_persist_data", JSON.stringify(nextFormState))
}

如果暂时无法调整父组件逻辑，需要保留原有DOM查询的存储方式，必须给每个input、textarea设置全局唯一的name属性，存储时将x.name作为key，禁止用className作为匹配标识。

2. 调整初始化逻辑，在React生命周期内完成回填 #

弃用window.onload全局事件，在React组件挂载阶段完成数据读取和状态初始化，回填时直接把存储的数据同步到React状态中，让React自动完成表单渲染，从根源避免重渲染覆盖值的问题。
适配你现有组件结构的示例代码：

import { useState, useEffect } from 'react'

// 父组件内
// 初始化状态时优先读取localStorage缓存，无缓存则用默认初始值
const [allFormState, setAllFormState] = useState(() => {
  const cachedData = localStorage.getItem("form_persist_data")
  return cachedData ? JSON.parse(cachedData) : {
    contactInfo: {},
    templates: {
      contactInfo: {}
    },
    newField: null
    // 其余表单初始字段按业务补全
  }
})

// 兼容你之前存储的旧格式数据（saved_data数组格式）
useEffect(() => {
  const oldCachedData = localStorage.getItem("saved_data")
  // 只在没有新格式缓存时做一次旧数据转换
  if (oldCachedData && !localStorage.getItem("form_persist_data")) {
    const oldDataArray = JSON.parse(oldCachedData)
    const convertedContactInfo = {}
    oldDataArray.forEach(field => {
      convertedContactInfo[field.key] = field.value
    })
    setAllFormState(prev => ({
      ...prev,
      contactInfo: convertedContactInfo
    }))
  }
}, [])

状态初始化完成后，直接将状态中的值作为props传入InputFields组件即可，React会自动把缓存值渲染到对应表单字段中，无需手动操作DOM：

<InputFields 
  stateKey = 'contactInfo' 
  key = {allFormState.contactInfo.id || 'contact_form'}
  completedFields = {allFormState.contactInfo}
  templateFields = {allFormState.templates.contactInfo}
  onDataEntry = {handleDataEntry}
  newField = {allFormState.newField}
/>

• 受控表单场景下禁止手动通过原生DOM修改输入框的值，所有值变更必须通过React的状态更新触发，否则重渲染时手动修改的DOM值会被直接覆盖。
• 绑定DOM事件时如果加了括号func()是立即执行，传事件回调应该传函数引用func，但React项目中不推荐依赖window全局load事件做组件初始化，时机和React渲染周期不匹配，容易出现找不到DOM的问题。
• 存储localStorage时尽量保持数据结构和业务使用的状态结构一致，减少额外的数据转换逻辑，降低字段匹配错误的概率。
• 临时救急的DOM回填方案（不推荐长期使用）：如果暂时无法调整状态逻辑，可在表单组件挂载完成后执行DOM赋值，注意必须给每个字段加唯一name标识：

// 仅作临时兜底用，存在重渲染丢值的问题
useEffect(() => {
  const savedFields = JSON.parse(localStorage.getItem("saved_data") || '[]')
  const allFormElements = document.querySelectorAll('textarea, input[type="text"]')
  allFormElements.forEach(el => {
    const targetField = savedFields.find(item => item.key === el.name)
    if (targetField) el.value = targetField.value
  })
}, [])

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