MUI DataGrid存在行数据却不渲染的问题求助

近期重构代码后，MUI DataGrid出现明明存在行数据，但表格完全不渲染行的问题，此前功能一切正常。

组件代码 #

const UserGrid: React.FC = () => {
  const reducer = useGrid();
  const { state } = useContext(UserContext);
  const { loading } = state.crudState;
  const { rowIds, sortState, filterState } = reducer.state;
  const users = state.users;
  const columns: GridColDef[] = [
    { field: "id", headerName: "ID", width: 100, editable: false },
    {
      field: "name",
      headerName: "Name",
      flex: 1,
    },
    {
      field: "email",
      headerName: "Email",
      flex: 1,
    },
  ];
  return (
    <Box sx={{ width: "100%", display: "flex", height: "100%", p: 5 }}>
      <Box sx={{ m: "0 auto", flexGrow: 1, height: "600px" }}>
        {users && (
          <DataGrid
            columns={columns}
            loading={loading === "main"}
            rows={users}
            getRowId={(row) => row.id}
            onSelectionModelChange={(newSelection) => {
              reducer.dispatch({ type: "rowids", payload: newSelection });
            }}
            onSortModelChange={(newSortModel) => {
              reducer.dispatch({ type: "sort", payload: newSortModel });
            }}
            sortModel={sortState}
            checkboxSelection={true}
            filterModel={filterState}
            selectionModel={rowIds}
            components={{
              ColumnSortedAscendingIcon: SortAscIcon,
              ColumnSortedDescendingIcon: SortDescIcon,
              Toolbar: GridToolbar,
              Footer: GridFooter,
              Pagination: null,
            }}
            scrollbarSize={10}
            componentsProps={{
              toolbar: { rowIds: rowIds },
              baseCheckbox: { sx: { color: "primary.main" } },
              footer: {
                rowIds: rowIds,
              },
            }}
            autoPageSize
            disableSelectionOnClick
          />
        )}
      </Box>
    </Box>
  );
};

Reducer代码 #

const useUserActions = () => {
  const userActionReducer = (state: State, action: Action): State => {
    switch (action.type) {
      case "main":
        return {
          ...state,
          users: action.payload?.body as User[],
          crudState: {
            ...state.crudState,
            ...(action.payload?.state as CrudState),
          },
        };
      case "remove":
        return {
          ...state,
          users: state.users?.filter(
            (user) => !action.payload?.ids?.includes(user.id)
          ),
          crudState: {
            ...state.crudState,
            ...(action.payload?.state as CrudState),
          },
          init: undefined,
        };
      case "add":
        return {
          ...state,
          users: [...(state.users || []), action.payload?.body as User],
          crudState: {
            ...state.crudState,
            ...(action.payload?.state as CrudState),
          },
          init: undefined,
        };
      case "init":
        return {
          ...state,
          init: action.payload?.init as Init,
        };
      default:
        return state;
    }
  };

  const [state, dispatch] = useReducer(userActionReducer, initialState);

  const setInit = (init: Init) => dispatch({ type: "init", payload: { init } });
  useEffect(() => {
    const api = new ApiClient();
    if (state.init) {
      state.init.query === "add" && userAddAction(state, dispatch, api);
      state.init.query === "remove" && userRemoveAction(state, dispatch, api);
    }
  }, [state]);
  useEffect(() => {
    const api = new ApiClient();
    const fetchUsers = userFetchAction(dispatch, api);
    fetchUsers();
  }, []);
  return { state: state, setInit: setInit };
};

数据获取函数 #

export function userFetchAction(
  dispatch: React.Dispatch<Action>,
  api: ApiClient
) {
  return async () => {
    dispatch({ type: "main", payload: { state: { loading: "main" } } });
    await api
      .getUsers()
      .then((res) => res.json())
      .then((users) => {
        dispatch({
          type: "main",
          payload: { body: users, state: { loading: null } },
        });
      })
      .catch((error) => {
        dispatch({
          type: "main",
          payload: {
            state: {
              error: [{
                message: error.detail,
                statusCode: error.statusCode,
                ...error,
              }],
              loading: null,
            },
          },
        });
      });
  };
}

已尝试的解决方案 #

• 用useState结合useEffect存储数据，无效：

const [ rows, setRows ] = useState<User[]>([])
useEffect(()=>{
  if (state.users.length) {
     setRows(state.users)
  }
}, [state])

• 设置容器高度、开启autoHeight属性，均未解决问题

调试信息 #

React DevTools显示users数据已存在，但表格无行渲染：

• 截图1：React DevTools面板中可清晰看到行数据
• 截图2：DataGrid仅显示表头区域，无任何行内容

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