能否在单个Ant Design Table中使用两个数据源？附Recoil选择器代码求助

当然可以实现，Ant Design Table的dataSource属性接受一个数组，只要将两个数据源合并为一个符合列配置结构的数组即可，具体分两种场景处理：

场景1：两个数据源结构完全匹配列配置 #

如果filingsSelector和financialyearSelector返回的数据结构完全一致，且和FilingsColumns的字段对应，直接合并两个数组即可：

const FilingsTable = () =>{
  const selectorValue = useRecoilValue(filingsSelector);
  const financalyearSelectorValue = useRecoilValue(financialyearSelector);
  
  // 合并两个数据源
  const combinedDataSource = [...selectorValue, ...financalyearSelectorValue];

  return(
    <div>
      <Table columns={FilingsColumns} dataSource={combinedDataSource} />
    </div>
   )
}
export default FilingsTable;

场景2：两个数据源结构不一致 #

如果两个数据源的字段和列配置不匹配，需要先将它们转换为统一的结构，再合并：

const FilingsTable = () =>{
  const selectorValue = useRecoilValue(filingsSelector);
  const financalyearSelectorValue = useRecoilValue(financialyearSelector);
  
  // 转换 filings 数据结构适配列配置
  const transformedFilings = selectorValue.map(item => ({
    key: item.filingId,
    name: item.filingName,
    date: item.submissionDate
    // 其他与FilingsColumns匹配的字段
  }));

  // 转换 financialyear 数据结构适配列配置
  const transformedFinancialYear = financalyearSelectorValue.map(item => ({
    key: item.yearId,
    name: item.yearLabel,
    date: item.yearStartDate
    // 其他与FilingsColumns匹配的字段
  }));

  // 合并转换后的数据源
  const combinedDataSource = [...transformedFilings, ...transformedFinancialYear];

  return(
    <div>
      <Table columns={FilingsColumns} dataSource={combinedDataSource} />
    </div>
   )
}
export default FilingsTable;

额外注意事项 #

• 去重处理：如果两个数据源存在重复数据（比如相同的key或唯一标识），可以通过以下方式去重，避免Table出现重复key警告：

  // 基于key字段去重
  const uniqueDataSource = Array.from(
    new Map(combinedDataSource.map(item => [item.key, item])).values()
  );
  

• 加载状态处理：如果两个Recoil选择器是异步获取数据，可使用useRecoilValueLoadable判断加载状态，避免渲染空数组或错误数据：

  const filingsLoadable = useRecoilValueLoadable(filingsSelector);
  const yearLoadable = useRecoilValueLoadable(financialyearSelector);
  
  if (filingsLoadable.state === 'loading' || yearLoadable.state === 'loading') {
    return <Spin />;
  }
  
  const selectorValue = filingsLoadable.contents;
  const financalyearSelectorValue = yearLoadable.contents;
  

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