React编辑页表单未修改字段值丢失提交为空问题求助

数据老陈

2026-10-6

问题根因

React输入框初始绑定的myData是空对象，myData.site和myData.content初始值为undefined，导致输入框被识别为非受控组件，后续异步请求拿到后端返回的原始数据更新myData时，输入框不会自动同步回填内容，输入框默认值实际为空。
维护了myData和fields两套重复的表单状态，逻辑混乱，异步拿到数据后只更新了myData，未同步给fields，未编辑的字段一直没有有效值。
提交时直接读取DOM元素值，非受控模式下未手动编辑的输入框值就是空，自然传递给后端的就是null。

修复方案

直接按以下步骤修改代码即可：

移除冗余的fields状态，统一用myData存储所有表单数据，同时给myData设置初始默认值，避免输入框变为非受控组件：

// 删掉原来的fields相关代码
const [myData, setMyData] = useState({
  site: '',
  content: '',
  updatedByCNUM: ''
});
const [isLoading, setIsLoading] = useState(false);
const [showEditButton, setShowEditButton] = useState(false);

异步请求拿到数据后，完整回填到myData中，确保输入框能正确显示原始值：

useEffect(() => {
  axios
    .post('/getDocToEdit', {id : idFromListServicesPage})
    .then((res) => {
      const resData = res.data || {};
      setMyData({
        site: resData.site || '',
        content: resData.content || '',
        updatedByCNUM: resData.updatedByCNUM || ''
      });
      setIsLoading(true);
    })
    .catch((error) => {
      console.log(error);
    })
    .finally(() => {
      setIsLoading(false);
    });
}, []);

输入框移除多余的onChange事件，不需要同时触发两个更新逻辑：

{/* site输入框 */}
<input
  type="text"
  value={myData.site}
  onInput={(e) => onTyping(e.target.name, e.target.value)}
  name="site"
  id="site"
/>

{/* content输入框 */}
<input
  type="text"
  value={myData.content}
  onInput={(e) => onTyping(e.target.name, e.target.value)}
  name="content"
  id="content"
/>

提交时直接从myData取数，不要读DOM，避免不可控问题：

const onClickEdit = (e, _id) => {
  e.preventDefault();
  const { site, content, updatedByCNUM } = myData;
  editById(_id, site, content, updatedByCNUM);
};

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