Reactjs MaterialUI数据网格加载动画无限循环

我正在使用MaterialUI数据网格，并且正在运行用于服务器端数据访问的教程网格。这是用React写的，我遇到了一个问题，加载循环一直在旋转。我在

React.useffect

中设置了一个断点，我看到它一次又一次地被击中

handlePageChange

似乎没有参与无限循环

稍微考虑一下，我觉得状态正在改变，这会触发整个事件再次执行，因此循环。停止这件事的条件是什么

import * as React from 'react';
import { DataGrid } from '@material-ui/data-grid';

function loadServerRows(page, data) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(data.rows.slice(page * 5, (page + 1) * 5));
    }, Math.random() * 500 + 100); // simulate network latency
  });
}

export default function App() {

  const data = {
    rows: [
      { id: 1, col1: 'Hello', col2: 'World' },
      { id: 2, col1: 'XGrid', col2: 'is Awesome' },
      { id: 3, col1: 'Material-UI', col2: 'is Amazing' },
    ],
    columns: [
      { field: 'col1', headerName: 'Column 1', width: 150 },
      { field: 'col2', headerName: 'Column 2', width: 150 },
    ],
    rowLength: 100,
    maxColumns: 6
  }

  const [page, setPage] = React.useState(0);
  const [rows, setRows] = React.useState([]);
  const [loading, setLoading] = React.useState(false);

  const handlePageChange = (params) => {
    setPage(params.page);
  };

  React.useEffect(() => {
    let active = true;

    (async () => {
      setLoading(true);
      const newRows = await loadServerRows(page, data);

      if (!active) {
        return;
      }

      setRows(newRows);
      setLoading(false);
    })();

    return () => {
      active = false;
    };
  }, [page, data]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={data.columns}
        pagination
        pageSize={5}
        rowCount={100}
        paginationMode="server"
        onPageChange={handlePageChange}
        loading={loading}
      />
    </div>
  );
}

import*as React from'React'；
从'@material ui/data grid'导入{DataGrid}；
函数loadServerRows（页面，数据）{
返回新承诺（（解决）=>{
设置超时（（）=>{
解析（数据行切片（第5页，（第+1页）*5页））；
}，Math.random（）*500+100）；//模拟网络延迟
});
}
导出默认函数App（）{
常数数据={
行：[
{id:1，col1:'你好'，col2:'世界'}，
{id:2，col1:'XGrid'，col2:'太棒了'}，
{id:3，col1:'materialui'，col2:'太棒了'}，
],
栏目：[
{字段：'col1'，标题名称：'Column 1'，宽度：150}，
{字段：'col2'，标题名称：'Column 2'，宽度：150}，
],
行长：100，
最大列数：6
}
const[page，setPage]=React.useState（0）；
const[rows，setRows]=React.useState（[]）；
常量[loading，setLoading]=React.useState（false）；
常量handlePageChange=（参数）=>{
设置页面（参数页面）；
};
React.useffect（（）=>{
让主动=真；
（异步（）=>{
设置加载（真）；
const newRows=await loadServerRows（第页，数据）；
如果（！活动）{
返回；
}
设置行（新行）；
设置加载（假）；
})();
return（）=>{
主动=假；
};
}，[第页，数据]；
返回(
);
}

在代码中，每次渲染时数据都会发生更改。作为一个选项，您可以使用useRef存储数据（或者只是将其从组件中移出）：

从“React”导入React
从“@material ui/data grid”导入{DataGrid}
函数loadServerRows（页面，数据）{
返回新承诺（（解决）=>{
设置超时（（）=>{
解析（数据行切片（第5页，（第+1页）*5页））
}，Math.random（）*500+100）//模拟网络延迟
})
}
函数App（）{
const data=React.useRef({
行：[
{id:1，col1:'你好'，col2:'世界'}，
{id:2，col1:'XGrid'，col2:'太棒了'}，
{id:3，col1:'materialui'，col2:'太棒了'}，
],
栏目：[
{字段：'col1'，标题名称：'Column 1'，宽度：150}，
{字段：'col2'，标题名称：'Column 2'，宽度：150}，
],
行长：100，
最大列数：6
})
const[page，setPage]=React.useState（0）
const[rows，setRows]=React.useState（[]）
常量[loading，setLoading]=React.useState（false）
常量handlePageChange=（参数）=>{
设置页面（参数页面）
}
React.useffect（（）=>{
让主动=真；
（异步（）=>{
设置加载（真）
const newRows=await loadServerRows（第页，data.current）
如果（！活动）{
返回
}
设置行（新行）
设置加载（错误）
})()
return（）=>{
活动=错误
}
}，[第页，数据]）
返回(
)
} 

请告诉我您使用的是什么版本的物料ui/数据网格？我找到这篇文章是因为我的加载覆盖根本不起作用。我可以使用相同的代码，在其他地方添加一个CircularProgress，知道我对服务器的调用，并将loading设置为true，然后设置为false，所有这些都有效。但是，从来没有在网格中。此应用程序使用的20个左右网格中的任何一个都不能使用。我正在使用“^4.0.0-alpha.22”。@material ui/data grid:“^4.0.0-alpha.23”，

import React from 'react'
import { DataGrid } from '@material-ui/data-grid'


function loadServerRows(page, data) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(data.rows.slice(page * 5, (page + 1) * 5))
    }, Math.random() * 500 + 100) // simulate network latency
  })
}

function App() {
  const data = React.useRef({
    rows: [
      { id: 1, col1: 'Hello', col2: 'World' },
      { id: 2, col1: 'XGrid', col2: 'is Awesome' },
      { id: 3, col1: 'Material-UI', col2: 'is Amazing' },
    ],
    columns: [
      { field: 'col1', headerName: 'Column 1', width: 150 },
      { field: 'col2', headerName: 'Column 2', width: 150 },
    ],
    rowLength: 100,
    maxColumns: 6
  })
  const [page, setPage] = React.useState(0)
  const [rows, setRows] = React.useState([])
  const [loading, setLoading] = React.useState(false)

  const handlePageChange = (params) => {
    setPage(params.page)
  }

  React.useEffect(() => {
    let active = true;

    (async () => {
      setLoading(true)
      const newRows = await loadServerRows(page, data.current)

      if (!active) {
        return
      }

      setRows(newRows)
      setLoading(false)
    })()

    return () => {
      active = false
    }
  }, [page, data])

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={data.current.columns}
        pagination
        pageSize={5}
        rowCount={100}
        paginationMode="server"
        onPageChange={handlePageChange}
        loading={loading}
      />
    </div>
  )
}