React中表单值变更时对象数据异常重置的解决方案问询

问题描述 #

React项目的网格中展示多条数据记录，每条记录包含文本输入框和日期选择器。当前存在异常行为：

• 修改日期时，控制台能正确显示文本数据与新日期值；
• 修改文本框内容，或修改其他记录的日期时，之前修改过的记录文本值会被重置为初始旧值。

原handleChange函数代码 #

const handleChange = (data) => {
    const { id: newId, textVal: franchise, dateVal: dateData } = data;
    setDataNew((prevInfo) => {
      const newList = [...prevInfo];
      const index = newList.findIndex((datum) => datum.newId === newId);
      if (index !== -1) {
        if (newId !== undefined) {
          newList[index].newId = newId;
        }
        if (franchise !== undefined) {
          newList[index].franchise = franchise;
        }
        if (dateData !== undefined) {
          newList[index].dateData = dateData;
        }
      } else {
        newList.push({ newId, franchise, dateData });
      }
      return [...newList];
    });
};

原输入框与日期选择器回调代码 #

<input type="text" onChange={(e) => textCallback({
    textVal: e.target.value,
    id: rowData[0].id,
    dateVal: rowData[4] // 文本框回调传入了原始rowData的日期值
})}/>

<DatePickerNew 
    setRequesterDate={(e) => dateCallback({
        dateVal: e, 
        id: rowData[0].id,
        textVal: rowData[3] // 日期选择器回调传入了原始rowData的文本值
    })} 
    startDate={colData}
/>

问题根源 #

异常的核心原因是回调函数传入的数据错误：
文本框和日期选择器的回调中，额外传递的另一个字段值来自原始的初始rowData，而非状态dataNew中保存的最新修改值。每次更新单个字段时，都会用旧值覆盖状态中另一个字段的最新值，导致之前的修改被重置。

最优解决方案 #

核心思路：更新单个字段时，仅传递当前修改的字段值和记录ID，不传递另一个字段的旧值，让handleChange只更新目标字段，保留其他字段的最新状态。

修改后的输入框与日期选择器回调 #

// 文本框回调：仅传递当前修改的文本值和记录ID
<input type="text" onChange={(e) => textCallback({
    textVal: e.target.value,
    id: rowData[0].id
})}/>

// 日期选择器回调：仅传递当前修改的日期值和记录ID
<DatePickerNew 
    setRequesterDate={(e) => dateCallback({
        dateVal: e, 
        id: rowData[0].id
    })} 
    startDate={colData}
/>

优化后的handleChange函数（可选） #

原函数已通过判断字段是否undefined实现部分更新，若想逻辑更简洁清晰，可修改为：

const handleChange = (data) => {
    const { id: newId, textVal: franchise, dateVal: dateData } = data;
    setDataNew((prevInfo) => {
      return prevInfo.map(item => {
        if (item.newId === newId) {
          // 仅合并传入的有效字段，保留原有字段的最新值
          return {
            ...item,
            ...(franchise !== undefined && { franchise }),
            ...(dateData !== undefined && { dateData })
          };
        }
        return item;
      });
    });
};

修改后，每次操作仅更新当前修改的字段，其他字段会保留状态中的最新值，不会再出现旧值重置的问题。

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