React中useEffect更新Hook组件时无限触发问题求助

1. 核心问题：useEffect缺少依赖数组 #

你的useEffect没有指定依赖项，这会导致每次组件渲染（包括状态更新、props变化、父组件渲染）都会重复执行这个钩子，直接触发无限循环的基础逻辑。

原错误代码 #

useEffect(() => {
  const datas = dataService
    .getBomList(page, limit, order, search)
    .then((response) => {
      console.log("BOM");
      return response.data.data.data;
    });
});

修复方案 #

给useEffect添加依赖数组，仅当分页、条数、排序、搜索条件变化时才触发请求，同时补上状态更新逻辑：

useEffect(() => {
  dataService
    .getBomList(page, limit, order, search)
    .then((response) => {
      setDummyData(response.data.data.data); // 把请求结果存入状态
    })
    .catch(err => {
      console.error('获取BOM列表失败:', err); // 新增错误处理
    });
}, [page, limit, order, search]); // 仅依赖这些状态变化

2. 潜在循环隐患：状态更新的闭环问题 #

如果在useEffect里更新了某个状态（比如setDummyData），不要把这个状态加入依赖数组——否则会触发「请求成功→更新状态→组件重渲染→useEffect再次执行→再次请求→再次更新状态」的无限循环。

3. 其他代码细节修复 #

• 排序逻辑错误：onSortModelChange里的setOrder(...newSortModel)应该改为setOrder(newSortModel)，因为newSortModel是数组，展开会导致order变成单个对象，不符合初始状态的数组结构。
• 数据变量不匹配：JSX中使用的data是注释掉的RTK Query变量，实际应该用dummyData，比如rows={dummyData || []}、rowCount={(dummyData && dummyData.length) || 0}。

修复后的核心代码片段 #

const BOM = () => {
  const theme = useTheme();
  // 后端请求参数
  const [page, setPage] = useState(0);
  const [limit, setlimit] = useState(100);
  const [order, setOrder] = useState([
    { column: "1", dir: "asc" }
  ]);
  const [search, setSearch] = useState({ value: "" });
  const [dummyData, setDummyData] = useState([]);

  // 修复后的useEffect
  useEffect(() => {
    dataService
      .getBomList(page, limit, order, search)
      .then((response) => setDummyData(response.data.data.data))
      .catch(err => console.error('请求失败:', err));
  }, [page, limit, order, search]);

  const [searchInput, setSearchInput] = useState("");

  // 列配置不变，省略...

  return (
    <Box m="5px">
      <Box height="80vh" sx={/* 样式不变 */}>
        <DataGrid
          getRowId={(row) => row.id}
          columns={columns}
          rowCount={(dummyData && dummyData.length) || 0}
          rowsPerPageOptions={[20, 50, 100]}
          rows={dummyData || []}
          pagination
          paginationMode="server"
          sortingMode="server"
          page={page}
          pageSize={limit}
          onPageSizeChange={(newPageSize) => setlimit(newPageSize)}
          onPageChange={(newPage) => setPage(newPage)}
          onSortModelChange={(newSortModel) => setOrder(newSortModel)} {/* 修复排序逻辑 */}
          components={{ Toolbar: DataGridCustomToolbar }}
          componentsProps={{
            toolbar: { searchInput, setSearchInput, setSearch },
          }}
        />
      </Box>
    </Box>
  );
};

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