React中如何在数据入库前保存表单已填写的字段值？

针对React+Redux技术栈下的表单草稿持久化需求，可根据实际场景选择以下几种实现方式：

方案1：使用redux-persist插件（和现有技术栈适配度最高） #

这是最适配Redux生态的实现方案，不需要大幅修改现有状态管理逻辑：

• 安装依赖后在store配置环节，把表单对应的reducer分片加入持久化白名单，默认存储在localStorage中，也可自定义存储介质
• 表单输入变更时正常dispatch action更新Redux内的表单状态即可，持久化逻辑由插件自动处理
• 表单组件挂载时直接从Redux读取已持久化的表单数据回填到对应字段，提交成功后手动调用插件的purge方法清空该分片的持久化数据即可

注意不要把所有Redux状态都加入持久化列表，仅保留表单相关分片即可，避免冗余存储和状态冲突

方案2：手动对接浏览器存储API（无额外依赖） #

如果不想引入新的第三方依赖，可以自己实现存储逻辑：

• 给表单加防抖的变更监听，每次输入停顿300ms后，把序列化后的表单数据存入sessionStorage.setItem('meetingFormDraft', JSON.stringify(formData))，用sessionStorage的优势是用户关闭浏览器后草稿会自动清空，不会残留冗余数据
• 表单组件挂载的useEffect钩子中，先判断sessionStorage中是否存在对应草稿数据，存在则解析后直接回填到表单字段
• 表单提交成功或用户主动点击重置按钮时，调用sessionStorage.removeItem('meetingFormDraft')清空草稿即可

方案3：路由状态暂存（仅适合站内短跳转场景） #

如果用户仅会在同应用内的路由间跳转，不需要跨会话、跨页面保留草稿，可以用路由自带的状态参数暂存：

• 监听路由离开事件，跳转前把当前表单数据存入路由的state参数中
• 返回表单页时从路由state中读取数据回填即可，这种方式不需要操作存储，但是跳转外部页面、刷新浏览器后数据会丢失，仅适合处理站内临时跳转的场景

redux-persist基础配置示例 #

// store.js 配置示例
import { configureStore } from '@reduxjs/toolkit'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // 默认对应localStorage
import meetingFormReducer from './slices/meetingFormSlice'

const persistConfig = {
  key: 'meetingForm',
  storage,
  whitelist: ['formData'] // 只持久化表单数据字段，避免冗余
}

const persistedReducer = persistReducer(persistConfig, meetingFormReducer)

export const store = configureStore({
  reducer: {
    meetingForm: persistedReducer,
    // 其余业务reducer正常配置即可
  }
})

export const persistor = persistStore(store)

表单回填逻辑示例 #

// 会议表单组件内
import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { setFormField, resetForm } from './slices/meetingFormSlice'

const MeetingForm = () => {
  const formData = useSelector(state => state.meetingForm.formData)
  const dispatch = useDispatch()

  // 组件挂载时回填草稿
  useEffect(() => {
    if (formData) {
      // 替换为自身项目的表单赋值逻辑，比如antd的form.setFieldsValue方法
      Object.keys(formData).forEach(key => {
        form.setFieldValue(key, formData[key])
      })
    }
  }, [formData])

  // 提交成功后清空草稿
  const handleSubmit = async (values) => {
    await api.submitMeeting(values)
    dispatch(resetForm())
  }

  // 其余表单业务逻辑
}

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