reactjs - 数据未在 Material UI DataGrid 中加载 - React

Question

我是 React 的新手，正在做一个小项目来学习 React 和 Redux。

我正在从 API 获取数据，并希望使用 Material UI Datagrid 在页面上显示它。问题是，当我登录（现在只是假身份验证）时，它会将我带到项目页面，但数据没有显示。当我单击页眉中的页面链接时，一切加载都没有问题。

另一件事，我有另一个页面 - 供应商。在我重定向到项目页面（目前我有 5 个项目）后，如果我想去供应商页面（目前有 7 个），页面只加载 5 个供应商。在我点击页面的链接后，它加载了所有 7 个。

如果我只使用带有 Cells 和 Rows 的基本 TableBody，那么一切都会按预期加载。

当我控制日志数据（供应商）时，首先它显示数组中的 5 个项目，然后是 7 个。当我单击页面的链接时，它只显示 7 并且数据加载如假设。在重定向到项目时，当页面为空白时，它会记录空数组，然后是 5 个项目。在我点击链接后，它只显示 5。

当我控制日志props.itemsList时，它只显示 5 个项目的数组。

我不确定我做错了什么。我的猜测是它与 useEffect 有关，因为它假设在加载组件后获取数据，所以初始数据是空数组。但那该怎么办，不确定。先感谢您。希望这个问题不要太愚蠢......

这是登录页面的代码。

import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import auth from './Auth';


const useStyles = makeStyles((theme) => ({
  paper: {
    marginTop: theme.spacing(8),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
    backgroundColor: theme.palette.secondary.main,
  },
  form: {
    width: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(1),
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

export const Login = props => {
  const classes = useStyles();

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Avatar className={classes.avatar}>
          <LockOutlinedIcon />
        </Avatar>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>                
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
            onClick = {() => {
              auth.login(() => {      
                  props.history.push({
                    pathname: "/items",
                    });
                })                
              }
            }
          >
            Login
          </Button>
         
      </div>    
    </Container>
  );
}

这是我的项目列表页面。

import React, {useState, useEffect} from "react";
import { connect } from "react-redux"; /**to connect react with redux data */
import * as actions from "../actions/itemsList";
import Navbar from './Navbar';
import { Grid, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from "@material-ui/core";

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


const ItemsList = (props) => {
    

    //when component is fully loaded then call function fetch all
    useEffect(()=>{
        props.fetchAllItems()
    }, [])
    
    let items = props.itemsList.map((record,index)=>{
        return ({
            id: index,
            ItemNumber: record.itemNumber,
            ItemDescription: record.itemDescription
        })
    })

    
    const columns=[
        { field: "ItemNumber", headerName: "Item Number ", width: 150 }, 
        { field: "ItemDescription", headerName: "Item Description", width: 300 }, 
        { field: "", headerName: "", width: 200 }
    ];         
 

    return (           
        <Paper>
            <Navbar/>
            <div style={{ height: '80vh ', width: '100%' }}>
                <DataGrid
                    pageSize={10}
                    rowsPerPageOptions={[10, 25, 50]}
                    pagination
                    rows={items}
                    columns={columns}
                />
            </div>
        </Paper>
    );
}

//what data from store we want to use
const mapStateToProps = state => ({           
        itemsList:state.itemsList.list /**name of the reducer */    
});

//actions
const actionToProps ={
    fetchAllItems : actions.fetchAll
}

export default connect(mapStateToProps,actionToProps)(ItemsList);

这是我使用 TableBody 的时候

import React, {useState, useEffect} from "react";
import { connect } from "react-redux"; /**to connect react with redux data */
import * as actions from "../actions/itemsList";

import { Grid, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody } from "@material-ui/core";



const ItemsList = (props) => {
   
    //when component is fully loaded then call function fetch all
    useEffect(()=>{
        props.fetchAllItems()
    }, [])

    return (
        <Paper>
            <Grid container>
               <TableContainer>
                   <TableHead>
                   <TableRow>
                       <TableCell>Item Number</TableCell>
                       <TableCell>Item Description</TableCell>
                   </TableRow>
                   </TableHead>
                   <TableBody>
                       {
                           props.itemsList.map((record,index)=>{
                               return (<TableRow key={index} /**have to add key property */>
                                   <TableCell>{record.itemNumber}</TableCell>
                                   <TableCell>{record.itemDescription}</TableCell>
                               </TableRow>)
                           })
                       }
                   </TableBody>
               </TableContainer>
            </Grid>
        </Paper>
    );
}

//what data from store we want to use
const mapStateToProps = state => ({           
        itemsList:state.itemsList.list /**name of the reducer */    
});

//actions
const actionToProps ={
    fetchAllItems : actions.fetchAll
}

export default connect(mapStateToProps,actionToProps)(ItemsList);

标签： reactjsreduxmaterial-ui