Redux Toolkit提交表单后state自动重置为初始值问题求助

问题根因 #

你的Redux状态重置是表单提交的默认浏览器行为导致的：表单点击提交按钮后默认会触发页面刷新，整个React应用会重新初始化，Redux Store自然就回到了初始状态，你看到的「短暂设置成功」就是刷新前的瞬间状态。

修复步骤 #

1. 阻止表单提交的默认刷新行为
   修改saveSourceDetails函数，接收事件参数并调用preventDefault()：

const saveSourceDetails = (event) => {      
  // 加这一行阻止默认表单提交刷新
  event.preventDefault()
  const payload = { 
    name : name,
    description : description,
    version: version ,
    contact: contact
  }      
  dispatch(addSource(payload))
};

2. 修正useDispatch的错误调用
   useDispatch不需要传入任何参数，把空字符串删掉：

const dispatch = useDispatch()

3. 移除多余的阻止默认逻辑
   onDataChange是输入框的onChange事件回调，不需要调用event.preventDefault()，把这行删掉即可，不影响功能但属于冗余代码。

可选优化点 #

你的版本选择下拉框加了multiple属性支持多选，当前直接取event.target.value只能拿到第一个选中的版本值，如果确实需要多选，取值逻辑要改成：

if( event.target.name === "version"){
  const selectedVersions = Array.from(event.target.selectedOptions).map(opt => opt.value)
  setVersion(selectedVersions)
}

如果不需要多选，直接删掉<select>标签上的multiple=""属性即可。

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