React向MUI Table组件传值触发ESLint依赖缺失警告

核心问题原因 #

你的useMemo回调里用到了MainPageTableRowData这个props，但依赖数组里没包含它，违反了React Hooks的exhaustive-deps规则——ESLint会强制要求hook回调用到的所有外部变量都加入依赖数组，避免闭包导致的旧值引用问题。

解决方案1：规范添加依赖（推荐） #

直接把MainPageTableRowData加入useMemo的依赖数组，这是最符合React Hooks设计理念的做法：

const sortedRows = React.useMemo(() => {
  return stableSort(MainPageTableRowData, getComparator(order, orderBy));
}, [MainPageTableRowData, order, orderBy]);

• 逻辑说明：只有当MainPageTableRowData、排序规则order或orderBy变化时，才会重新执行stableSort，保证排序结果始终和最新数据同步。
• 性能说明：如果stableSort是纯函数（相同输入返回相同输出），且MainPageTableRowData不会无意义重复创建（比如父组件没每次渲染都生成新数组），这种做法不会有性能损耗。

解决方案2：优化父组件的props传递（解决不必要的重计算） #

如果父组件MainPage里的rows数据是每次渲染都会重新创建的新数组（比如直接写const rows = [{...}, {...}]），那子组件加入依赖后会导致useMemo每次都重新执行，失去缓存意义。这时候需要在父组件先缓存rows：

// MainPage组件内
const rows = React.useMemo(() => {
  // 这里放生成表格数据的逻辑，比如接口请求结果或静态数据
  return [
    { id: 1, name: "张三", age: 25 },
    { id: 2, name: "李四", age: 30 }
  ];
}, []); // 依赖数组放生成rows需要的变量，比如接口参数、状态等

// 传递给TablePane
<TablePane MainPageTableRowData={rows} />

这样rows只会在依赖变化时重新生成，子组件的useMemo也只会在必要时重新执行排序。

解决方案3：临时忽略ESLint警告（不推荐） #

如果确定不需要依赖MainPageTableRowData（比如数据永远不会变化），可以用ESLint注释临时忽略警告，但这种做法容易引发数据不同步的bug，谨慎使用：

const sortedRows = React.useMemo(() => {
  return stableSort(MainPageTableRowData, getComparator(order, orderBy));
}, [order, orderBy]); // eslint-disable-line react-hooks/exhaustive-deps

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