React中数组数据无法匹配Grid组件表头的问题求助

问题分析 #

你的数据映射逻辑存在格式错误，导致Grid组件无法正确匹配表头：

• 转换后的每一行数据是混合结构：[{ id: data.id }, data.comp, data.store, data.name, data.feedback]，第一个元素是对象，后续是字符串，Grid无法识别这种混合格式，直接导致字段偏移、公司数据"消失"。
• 缺少表头要求的「建立日期」字段，未主动留空，进一步加剧列匹配混乱。

最优解决方案 #

根据Grid组件的常见数据格式要求，分两种场景修正：

场景1：Grid期望按表头顺序排列的数组型行数据

修正App组件中的数据转换逻辑，确保每一行是纯数组，且顺序严格对应表头（包括缺失字段留空）：

const [dataAll, setDataAll] = useState([]);

useEffect(() => {
  // 假设表头顺序为：ID、公司名称、店铺、联系人、反馈、建立日期
  const newData = newCompData?.map((data) => {
    return [
      data.id,       // ID列
      data.comp,     // 公司名称列
      data.store,    // 店铺列
      data.name,     // 联系人列
      data.feedback, // 反馈列
      ''             // 建立日期列（留空）
    ];
  });

  setDataAll(newData);
}, []);

return (
  <div className="App">
    <Table newData={dataAll} />
  </div>
);

场景2：Grid期望键值对匹配的对象型行数据

如果Grid的表头配置是通过字段名（key）映射，则返回与表头字段名一致的对象，缺失字段赋值为空：

const [dataAll, setDataAll] = useState([]);

useEffect(() => {
  // 假设表头字段key为：id、comp、store、name、feedback、establishDate
  const newData = newCompData?.map((data) => {
    return {
      id: data.id,
      comp: data.comp,
      store: data.store,
      name: data.name,
      feedback: data.feedback,
      establishDate: '' // 对应建立日期字段，留空
    };
  });

  setDataAll(newData);
}, []);

return (
  <div className="App">
    <Table newData={dataAll} />
  </div>
);

关键注意事项 #

• 确认TableConfig中的表头列顺序（数组场景）或字段key（对象场景），必须与转换后的数据完全对应。
• 所有表头要求的字段，无论数据源是否存在，都要在转换时明确赋值（空字符串、null等），避免列偏移。

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