Material-ui Datagrid 不稳定保持刷新

Question

下面是我用来从 api 获取数据并将其绑定到 materi ui 数据网格的代码。我使用的版本是“@mui/x-data-grid”：“^7.18.0”，底部突出显示的部分是不断闪烁和不断增长的部分。任何指示都会有所帮助。谢谢你。

代码非常简单，我不确定我做错了什么。

const [adUsers, setADUsers] = useState<IADUser[]>([]);

const [showLoader, setShowLoader] = useState<boolean | undefined>(undefined);

const [showGrid, setShowGrid] = useState<boolean | undefined>(undefined);

 const onSearchHandle = (e: any) => {
    if (validate()) {
        setShowLoader(true);
        let response: IADUser[];
        userStore.getAdUsers(searchText).then((data) => {
            setADUsers(data);
        });

        setShowLoader(false);
    } else {
        console.log("Validation failed");
    }
};

useEffect(() => {
    if (showLoader == false) {
        setShowGrid(true);
    }
}, [showLoader]);

 const columns: GridColDef[] = [
    {
        field: "mail",
        headerName: "Email",
        width: 450,
        // renderCell: (params) => (
        //     //<a className="hyperink" href="#" onClick={() => userClickHandler(params.row.mail, params.row.firstName, params.row.surname)}>
        //         {params.row.mail}
        //     //</a>
        // ),
    },
    {
        field: "firstName",
        headerName: "Firstname",
        width: 450,
    },
    {
        field: "surname",
        headerName: "Surname",
        width: 450,
    },
];

 <div className="col table-responsive p-2">
                            {showGrid && (
                                <DataGrid
                                    getRowId={(row: IADUser) => row.rowId as number}
                                    rows={adUsers}
                                    columns={columns}
                                    initialState={{
                                        pagination: {
                                            paginationModel: {
                                                pageSize: 10,
                                            },
                                        },
                                    }}
                                    pageSizeOptions={[10]}
                                    disableRowSelectionOnClick
                                />
                            )}
                            {showLoader && <Spinner />}

Answer 1

您遇到的突出显示部分闪烁和增长的问题可能是由于加载程序状态的处理方式造成的。尝试这几个改变：

• 确保在获取数据后调用

  setShowLoader(false)

  ：

  const onSearchHandle = async (e: any) => {
   if (validate()) {
   setShowLoader(true);
  
   try {
       const data = await userStore.getAdUsers(searchText);
       setADUsers(data);
     } catch (error) {
       console.error("Failed to fetch AD users:", error);
     } finally {
       setShowLoader(false);
     }
   } else {
       console.log("Validation failed");
    }
  };
  

• 每当

  useEffect

  变为

  true

  时，将 showGrid 设置为

  showLoader

  的

  false

  可以工作，但您可以通过直接根据加载状态切换

  showGrid

  来简化它：

   useEffect(() => {
      if (!showLoader) {
        setShowGrid(adUsers.length > 0);
      }
    }, [showLoader, adUsers]);