useSelector 在初始页面加载中断时未接收状态 material ui table

Question

在初始页面加载时，Redux DevTools 成功捕获了数据（用户），但是 useSelector 不会立即收到状态。刷新页面后，数据成功保存在用户变量中。因此整个分页符 table

import React, { useEffect, useState } from "react";
import "./UserList.css";
import { DataGrid } from "@material-ui/data-grid";
import { useDispatch, useSelector } from "react-redux";
import { DeleteOutline } from "@material-ui/icons";
import { format } from "timeago.js";
import { Link } from "react-router-dom";
import { getUsers } from "../../redux/apiCalls";
import { deleteUser } from "../../redux/apiCalls";

const UserList = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    getUsers(dispatch);
  }, [dispatch]);

  const users = (useSelector((state) => state?.user?.users));

  const handleDelete = (id) => {
    deleteUser(id, dispatch);
    window.location.reload();
  };

  const columns = [
    { field: "_id", headerName: "ID", width: 180 },
    {
      field: "user",
      headerName: "User",
      width: 200,
      renderCell: (params) => {
        return <div className="userListUser">{params.row.username}</div>;
      },
    },
    {
      field: "email",
      headerName: "Email",
      width: 200,
    },
    {
      field: "isAdmin",
      headerName: "isAdmin",
      width: 150,
    },
    {
      field: "createdAt",
      headerName: "Account Created",
      width: 180,
    },
    {
      field: "action",
      headerName: "Action",
      width: 150,
      renderCell: (params) => {
        return (
          <>
            <Link to={"/user/" + params.row._id}>
              <button className="userListEdit">Edit</button>
            </Link>
            <DeleteOutline
              className="userListDelete"
              onClick={() => handleDelete(params.row._id)}
            />
          </>
        );
      },
    },
  ];
  console.log(users);
  return (
    <div className="userList">
      <DataGrid
        rows={users}
        columns={columns}
        getRowId={(row) => row._id}
        pageSize={10}
        rowsPerPageOptions={[10]}
        checkboxSelection
        disableSelectionOnClick
      />
    </div>
  );
};

export default UserList;

Answer 1

尝试执行以下操作

return (
    <div className="userList">
      {users && (
        <DataGrid
          rows={users}
          columns={columns}
          getRowId={(row) => row._id}
          pageSize={10}
          rowsPerPageOptions={[10]}
          checkboxSelection
          disableSelectionOnClick
        />         
      )}
    </div>
  );

useSelector 在初始页面加载中断时未接收状态 material ui table

useSelector not receiving state on initial page load breaking material ui table

state

reactjs

redux

material-ui

react-redux