时间戳

首页 > 解决方案 > 在 Material Ui Datagrid 中更新行后不显示数据

reactjs - 在 Material Ui Datagrid 中更新行后不显示数据

问题描述

该组件用于显示用户。一旦从另一个组件添加了新用户，usersUpdated就会切换并调用后端以再次获取所有用户，其中包含新添加的用户并显示在 Datagrid 中。但是数据网格不显示任何记录，并且扭曲了数据网格 UI。如果页面被刷新或在 Datagrid 中执行了一些其他操作，例如更改 pageSize，则正确显示所有记录。

    const UsersDisplayTable = (props) => {

    const usersUpdated = props.usersUpdated;
    const [columns, setColumns] = useState(
       [
                    {
                        field: 'email',
                        headerName: 'Email',
                        align: "left",
                        headerAlign: "left",
                        flex: 1,
                        filterable: true
                    },
                    {
                        field: 'dateOfBirth',
                        headerName: 'Date Of Birth',
                        align: "center",
                        headerAlign: "center",
                        flex: 0.75,
                        filterable: false,
                        sortable: false,
                        valueFormatter: (params) => {
                            const valueFormatted = moment(
                                    new Date(params.row.dateOfBirth)).format(
                                    'DD MMM YYYY');
                            return `${valueFormatted}`;
                        }
                    },
                    {
                        field: "actions",
                        headerName: "Actions",
                        sortable: false,
                        filterable: false,
                        align: "center",
                        headerAlign: "center",
                        flex: 0.75,
                        renderCell: (params) => {
                            return (
                                    <>
                                        <EditUserIcon
                                                onClick={(e) => props.editUser(
                                                        e, params.row)}
                                                title='Edit'/>
                                    </>
                            );
                        }
                    }
                ]
    );

    const [allUsers, setAllUsers] = useState([]);

    useEffect(() => {
        axios
        .get("/get-all-users")
        .then(data => {
            setAllUsers(data.data.data)
        }).catch(error => {})
    }, [usersUpdated])

    return (
            <>
                <DataGrid
                            sortingOrder={["desc", "asc"]}
                            rows={allUsers} columns={columns}
                            disableSelectionOnClick
                            disableColumnSelector />
            </>
    );
   }
   export default UsersDisplayTable;

数据网格的初始加载 在此处输入图像描述

添加动态行或用户后 在此处输入图像描述

这是 Material UI Datagrid 的限制吗？

标签： reactjsdatagridmaterial-ui

解决方案

我在使用@mui/x-data-grid 5.0.1 版时遇到了同样的问题。

我可以通过设置一个依赖于我的行的 useEffect 来解决这个问题。在这个使用效果中，我只是切换了一个状态变量，我将其用于网格中的行高。

const [rowHeight, setRowHeight] = useState(28);    

useEffect(() => {
         if (rowHeight === 28) {
           setRowHeight(29);
         }else {
          setRowHeight(28);
         }
      }, [rows]);

...

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={pgSize}
  rowHeight={rowHeight}
  ...otherProps  
/>

我认为通过更改高度会触发网格及其内容的重新渲染。

此解决方案是解决代码中错误的一种方法。

推荐阅读