修改输入框/日期字段时出现undefined值的技术求助

问题原因 #

每次修改单个字段（文本或日期）时，传入handleChange的data对象只包含当前修改的字段和id，未修改的字段未被传递，直接替换对象时，未传递的字段会被赋值为undefined。

解决方案 #

修改handleChange函数，更新数据时保留原有对象的未修改字段，仅覆盖当前修改的字段：

const handleChange = (data) => {
  const { id, ...updatedFields } = data;
  setDataNew((prevInfo) => {
    const newList = [...prevInfo];
    const index = newList.findIndex((datum) => datum.id === id);
    if (index !== -1) {
      // 合并原有字段与新修改的字段，避免未修改字段丢失
      newList[index] = { ...newList[index], ...updatedFields };
    } else {
      newList.push({ id, ...updatedFields });
    }
    return newList;
  });
};

原理说明 #

• 通过扩展运算符...解构出id和剩余的updatedFields（即当前修改的字段）
• 更新列表项时，先展开原有对象的所有属性，再展开新修改的字段，仅覆盖需要更新的内容，未修改的字段会保留原有值，不会变为undefined

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