React Redux与React Table结合示例及表格数据不渲染问题求解

导致表格不渲染的核心问题 #

你这套代码跑不出来数据根本不是Redux或者React Table集成的逻辑问题，就是两处依赖配置错误：

1. 致命问题：useMemo缓存切断了响应连接
   你写的const data = useMemo(() => residents, []);用了空依赖数组。组件第一次挂载的时候，Redux里的residents还在加载，根本是空值，这个useMemo直接把这个空值存下来当永久缓存。后面Redux接口请求完拿到真实居民数据了，因为useMemo的依赖没变化，根本不会重新计算，传给React Table的data永远是最开始的空数组，当然渲染不出来东西。
2. 次要问题：useEffect依赖漏写
   现在你的useEffect依赖是[dispatch, history]，把userInfo漏了。如果你的用户登录状态是异步从Redux加载的，组件第一次跑effect的时候还没拿到userInfo，直接就跳登录页了，根本不会触发listResidents的接口请求。

修正后的可运行实现 #

只需要改两处关键配置，原有JSX渲染逻辑完全不用动：

function ResidentTable({ history }) {
  const dispatch = useDispatch();

  const userLogin = useSelector(state => state.userLogin);
  const { userInfo } = userLogin;

  const residentList = useSelector(state => state.residentList);
  const { loading, error, residents } = residentList;

  // 修正useEffect：补上userInfo依赖，加判断避免重复发请求
  useEffect(() => {
    if (!userInfo || !userInfo.isAdmin) {
      history.push('/login');
      return;
    }
    // 只在没有居民数据时触发请求，避免重复调用接口
    if (!residents) {
      dispatch(listResidents());
    }
  }, [dispatch, history, userInfo, residents]);

  // columns是静态配置，空依赖没问题
  const columns = useMemo(() => RESIDENT_COLUMNS, []);
  // 修正data：把residents加入依赖，加空值兜底避免报错
  const data = useMemo(() => residents ?? [], [residents]);

  const tableInstance = useTable(
    { columns, data },
    useFilters,
    useGlobalFilter,
    useSortBy,
    usePagination
  );

  // 原来解构tableInstance的代码完全保留
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    nextPage,
    previousPage,
    canNextPage,
    canPreviousPage,
    prepareRow,
  } = tableInstance;

  // 加简单的状态兜底，避免界面无反馈
  if (loading) return <Box p="2rem 8rem">数据加载中...</Box>
  if (error) return <Box p="2rem 8rem" color="red.500">加载失败：{error}</Box>

  // 你原有的全部Table、分页按钮JSX逻辑直接保留即可
  return (
    <Box p="2rem 8rem">
      <ModalResident />
      {/* 原有Table渲染逻辑保持不变 */}
    </Box>
  );
}

两者结合的正确开发思路 #

• 所有列表数据、操作状态统一存在Redux中，组件只负责读状态、dispatch动作，不要在组件里自己维护居民列表的本地状态
• 传给React Table的data参数，必须和Redux里的residents状态保持响应式联动，别用空依赖的useMemo把响应式的值缓存成静态值
• React Table本身只负责对传入的data做筛选、排序、分页的计算工作，不负责数据获取，和Redux没有底层的集成依赖，只要把正确的响应式data传进去，就能正常工作

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