React Table在useState数组变更时不更新，如何用useEffect解决？

问题根源 #

你当前用props.mainData初始化data状态，但组件挂载后，props.mainData更新时，data状态不会自动同步，导致表格无法刷新。需要通过useEffect监听props.mainData的变化，同步更新本地状态，同时保留当前的排序状态。

具体实现步骤 #

1. 补充排序状态记录

新增一个状态记录当前排序的表头字段，确保props更新时能沿用之前的排序规则处理新数据：

const Registration = props => {
  // 初始时先过滤数据，和渲染逻辑保持一致
  const initialData = props.mainData.filter(val => val.a.substring(0, 4) !== "YYYY");
  const [data, setData] = useState(initialData);
  const [order, setOrder] = useState("asc");
  // 新增状态：记录当前排序的表头字段
  const [currentSortHeader, setCurrentSortHeader] = useState(null);

  const SortHeader = (header) => {
    setCurrentSortHeader(header); // 记录当前排序字段
    let sorted = [...data];
    if (order === "asc") {
      sorted.sort((a, b) =>
        a[header].toLowerCase() > b[header].toLowerCase() ? 1 : -1
      );
      setOrder("dsc");
    } else {
      sorted.sort((a, b) =>
        a[header].toLowerCase() < b[header].toLowerCase() ? 1 : -1
      );
      setOrder("asc");
    }
    setData(sorted);
  }

  // 其他代码...
}

2. 添加useEffect监听props变化

编写useEffect，当props.mainData变化时，对新数据进行过滤和排序（保留当前排序规则），然后更新data状态：

import { useState, useEffect } from 'react'; // 确保引入useEffect

// ... 其他状态和函数 ...

useEffect(() => {
  // 第一步：过滤新数据，和渲染时的过滤逻辑一致
  const filteredNewData = props.mainData.filter(val => val.a.substring(0, 4) !== "YYYY");

  // 第二步：如果已有排序规则，按规则排序新数据
  if (currentSortHeader) {
    const sortedNewData = [...filteredNewData].sort((a, b) => {
      const aValue = a[currentSortHeader].toLowerCase();
      const bValue = b[currentSortHeader].toLowerCase();
      
      if (order === "asc") {
        return aValue > bValue ? 1 : -1;
      } else {
        return aValue < bValue ? 1 : -1;
      }
    });
    setData(sortedNewData);
  } else {
    // 没有排序过，直接设置过滤后的新数据
    setData(filteredNewData);
  }
}, [props.mainData, currentSortHeader, order]); // 依赖项：props变化、排序字段或顺序变化时触发

3. 修复渲染中的笔误

注意你渲染表格时的这行代码：

<td data-item="a">{a}</td>

这里的{a}应该是{val.a}，否则会引用未定义的变量，导致报错：

<td data-item="a">{val.a}</td>

核心逻辑说明 #

• useEffect的依赖数组包含props.mainData，确保父组件传递的mainData新增/删除记录时，自动触发本地状态更新。
• 保留currentSortHeader和order作为依赖，确保props更新前的排序规则能自动应用到新数据上，无需用户重新操作。
• 初始状态就过滤数据，避免渲染不符合条件的记录，保持初始渲染和后续更新逻辑一致。

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