React Table 多字段修改历史记录单元格拆分显示问题求助

我来帮你搞定这个React Table的显示问题！你现在遇到的情况是：当修改多个字段后，Voltage、Year、Number这些字段的变更信息都挤在同一个单元格里，这是因为你当前的代码把所有变更字段的信息都打包成数组存到了同一个数据条目里，React Table直接渲染数组就会把所有内容堆在一起。

要实现每个字段的变更单独占一行，对应各自的旧值和新值，我们需要调整数据处理逻辑，把每个字段的变更拆成独立的数据条目，再配合修改列配置就能解决问题。

第一步：修改数据处理逻辑 #

把原来的map换成flatMap，这样可以把每个历史项中的多个变更字段拆成独立的数据行：

const batteryHistoryCopy = batteryHistory.flatMap(historyItem => {
  const changedFieldsData = Object.entries(historyItem.changed_fields || {});
  
  // 处理新增/删除这类没有变更字段的情况
  if (changedFieldsData.length === 0) {
    return [{
      ...historyItem,
      history_date: moment(historyItem.history_date).format("LLL"),
      history_type: (()=>{
        switch (historyItem.history_type) {
          case "~": return "Update";
          case "+": return "Addition";
          case "-": return "Deletion";
          default: return historyItem.history_type;
        }
      })(),
      changed_field: 'N/A',
      old_value: 'N/A',
      new_value: 'N/A'
    }];
  }

  // 把每个变更字段拆成单独的数据条目
  return changedFieldsData.map(([fieldKey, values]) => ({
    ...historyItem,
    history_date: moment(historyItem.history_date).format("LLL"),
    history_type: (()=>{
      switch (historyItem.history_type) {
        case "~": return "Update";
        case "+": return "Addition";
        case "-": return "Deletion";
        default: return historyItem.history_type;
      }
    })(),
    changed_field: capitalize(fieldKey),
    old_value: values.old_value,
    new_value: values.new_value
  }));
});

第二步：调整列配置 #

现在每个数据条目只对应单个字段的变更，所以列的accessor直接指向单个属性即可：

const columns = [
  { Header: 'History Type', accessor: 'history_type' },
  { Header: 'Modified By', accessor: 'history_user.username' },
  { Header: 'Modified At', accessor: 'history_date', sortBy: "datetime" },
  { 
    Header: "Changed Fields Section",
    columns: [
      { Header: "Actual Changed Field", accessor: "changed_field" },
      { Header: "Old Value", accessor: "old_value" },
      { Header: "New Value", accessor: "new_value" }
    ]
  },
]

为什么这样能解决问题？ #

原来的逻辑是把所有修改的字段、旧值、新值分别打包成数组，存在同一个数据条目里。React Table渲染数组时，会直接把数组的内容（比如["Voltage", "Year"]）显示在单元格中，导致多条数据挤在一起。

现在改成每个字段的变更对应一行数据，每个数据条目只存单个字段的变更信息，这样React Table就能把每个值单独渲染到对应的单元格里，完全符合你想要的效果。

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