React中使用Material-table调用服务端搜索时出现重复渲染崩溃问题

问题原因 #

你遇到的无限重渲染问题，核心原因是直接在MaterialTable的props中传入了动态生成的对象/函数，每次组件渲染都会生成新的引用，触发组件重复更新，搜索操作触发状态变更后就会进入循环。
不要直接在props中写对象、数组、匿名函数，这类值每次渲染都会生成新的引用，是React组件多余重渲染的常见诱因

解决步骤 #

1. 把静态的columns、options配置抽离到组件外部，或者用useMemo缓存：
   如果配置不依赖组件内部状态，直接写在组件外即可：

const TABLE_OPTIONS = { 
  debounceInterval: 1000,
  search: true,
  padding: "dense",
  headerStyle: {
    backgroundColor: "#fb6340",
    color: "#FFF",
  },
};

const TABLE_COLUMNS = [
  { title: "id", field: "_userId" },
  { title: "Name", field: "name" },
];

如果配置依赖组件内部状态，就用useMemo缓存：

const columns = useMemo(() => [
  { title: "id", field: "_userId" },
  { title: "Name", field: "name" },
], [/* 填入你的依赖项，没有就留空 */]);

const options = useMemo(() => ({ 
  debounceInterval: 1000,
  search: true,
  padding: "dense",
  headerStyle: {
    backgroundColor: "#fb6340",
    color: "#FFF",
  },
}), [/* 填入你的依赖项，没有就留空 */]);

2. 用useCallback缓存data对应的请求函数，避免每次渲染生成新的函数引用：

const fetchTableData = useCallback((query) => {
  return new Promise((resolve) => {
    getRecipes(
      query.search,
      query.pageSize,
      query.page,
      token
    ).then((res) => {
      resolve({
        data: res.recipes,
        page: res.page,
        totalCount: res.totalCount,
      });
    });
  });
}, [getRecipes, token]); // 把用到的外部依赖都加进依赖数组

3. 把缓存后的变量传入组件即可：

<MaterialTable
  options={options}
  title="Recipes"
  columns={columns}
  data={fetchTableData}
/>

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