react-data-table-component默认排序页面加载时不生效问题求助

使用react-data-table-component搭配react-data-table-component-extensions展示表格，表头点击排序功能正常，但页面加载时默认排序不生效（其他使用不同数据的页面可正常生效）。初始JSON数组包含labelID字段，通过该字段获取labelName和labelYear后生成新数组传入表格，期望默认按第3列labelYear降序排序。代码片段如下：

const [initialDiary, setInitialDiary]       = useState([]);
const [updatedDiaries, setUpdatedDiaries]   = useState([]); 

useEffect(() => {
      initialDiary.map(diary => {
          // getLabelName和getLabelYear返回字符串格式结果
          var newDiary = {...diary, ['labelName']:getLabelName(diary.labelID),
                                    ['labelYear']:getLabelYear(diary.labelID)};
          setUpdatedDiaries(prev => [...prev, newDiary]);
      })
}, [winediaries]);

...

// 期望按labelYear（第3列）进行默认降序排序
<DataTableExtensions columns={columns} data={updatedDiaries} export={false} print={false}>
      <DataTable noHeader defaultSortField={3} defaultSortAsc={false} highlightOnHover customStyles={customStyles} 
                 pagination paginationRowsPerPageOptions={rows} paginationPerPage={15}>
      </DataTable>
</DataTableExtensions>

1. 修正数据更新逻辑，避免异步状态更新问题 #

当前在map循环中逐个调用setUpdatedDiaries，会导致组件多次重渲染，且最终updatedDiaries的顺序不可控——表格可能在数据未完全处理完时就完成初始渲染，导致默认排序失效。应先一次性处理所有数据，再批量更新状态：

useEffect(() => {
  // 先批量处理所有数据，生成完整的新数组
  const processedDiaries = initialDiary.map(diary => ({
    ...diary,
    labelName: getLabelName(diary.labelID),
    labelYear: getLabelYear(diary.labelID)
  }));
  // 一次性更新状态，确保数据完整后再传入表格
  setUpdatedDiaries(processedDiaries);
}, [initialDiary]); // 依赖改为initialDiary，确保数据变化时触发处理

2. 用字段名而非列索引设置默认排序 #

defaultSortField推荐使用数据对象的字段名（如labelYear）而非列索引——列索引可能因columns配置变动失效，且组件内部排序逻辑更依赖字段名：

<DataTable 
  noHeader 
  defaultSortField="labelYear" // 替换为目标字段名
  defaultSortAsc={false} 
  highlightOnHover 
  customStyles={customStyles} 
  pagination 
  paginationRowsPerPageOptions={rows} 
  paginationPerPage={15}
>
</DataTable>

3. 确保目标列的排序功能已开启 #

检查columns配置，确认labelYear对应的列开启了sortable属性：

const columns = [
  // 其他列配置...
  {
    name: '标签年份',
    selector: row => row.labelYear,
    sortable: true, // 必须开启该属性，默认排序才会生效
  },
];

额外兜底方案：手动提前排序数据（可选） #

如果上述方案仍不生效，可在处理数据时直接对结果数组排序，确保传入表格的初始数据就是已排序状态：

const processedDiaries = initialDiary
  .map(diary => ({
    ...diary,
    labelName: getLabelName(diary.labelID),
    labelYear: getLabelYear(diary.labelID)
  }))
  // 按labelYear降序排序，注意若为字符串类型需转数字比较
  .sort((a, b) => Number(b.labelYear) - Number(a.labelYear));

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