Grid组件API数据日期字段重复显示与键重命名的代码修改方案

• Grid组件从API获取记录并展示，包含文本和日期输入字段
• 输入日期数据时，字段出现重复显示的问题
• API返回的JSON数据格式为est: 10/20/2022，需在组件中显示为Establish: 10/20/2022

原代码片段：

//Here 'allData' is an array of data from JSON 
const tempData = allData;

tempData.map((x) => {
  if (data.id === x.id) {
    x.name = data.textVal;
  }

  // Here I'm trying to assign new key 'Establish' to old key 'est'
  if (data.id === x.id) {
    x["est"] = x["Establish"];
    x.Establish = data.dateVal;
  }
});

原代码存在两个核心问题：直接修改原API数据数组、键名映射逻辑错误导致重复键存在，以下是修正方案：

1. 避免直接修改原数组 #

原代码中const tempData = allData是引用赋值，会直接修改API返回的原始数据，需创建数组副本：

const tempData = [...allData]; // 用扩展运算符创建新数组副本

2. 修正键名映射逻辑，消除重复字段 #

方案A：统一使用Establish作为字段名（推荐） #

在数据处理阶段统一替换键名，编辑时直接更新目标字段，避免同时存在est和Establish两个重复键：

// 初始获取API数据时，统一格式化键名
const formattedData = allData.map(item => ({
  ...item,
  Establish: item.est, // 将原est的值映射到Establish
  est: undefined // 移除旧键，避免重复渲染
}));

// 编辑数据时的更新逻辑
const updatedData = formattedData.map(x => {
  if (data.id === x.id) {
    return {
      ...x,
      name: data.textVal,
      Establish: data.dateVal // 直接更新Establish字段
    };
  }
  return x;
});

方案B：保留原est键，仅在展示时映射 #

若需保留原est数据，编辑时仅更新Establish，同时确保未编辑项的Establish字段有值：

const tempData = [...allData];

const updatedData = tempData.map(x => {
  if (data.id === x.id) {
    return {
      ...x,
      name: data.textVal,
      Establish: data.dateVal // 仅更新Establish字段
    };
  }
  // 未编辑项，从est字段映射值到Establish
  return {
    ...x,
    Establish: x.Establish || x.est
  };
});

3. 组件渲染层配置 #

在Grid的列配置中，仅指定Establish作为日期列的数据源，不要同时配置est字段，彻底避免重复显示。

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