Блог

Я создаю диалоговое окно, в котором отображается сетка с некоторым содержимым для определенного объекта (пример ниже), и когда консоль регистрирует данные, которые я получил из запроса, я получаю правильные данные:

 0: {id: 1, workStationID: 200, version: '2.10', status: 'Fusion', dateTimeStamp: '2021-10-21T17:28:19', …} 1: {id: 1, workStationID: 31, version: '2.10', status: 'Fusion', dateTimeStamp: '2021-09-29T15:50:46', …} 2: {id: 1, workStationID: 21, version: '2.10', status: 'Fusion', dateTimeStamp: '2021-08-05T18:35:01', …}  

Однако, когда отображается сетка, в html отображается только последний элемент, и я не могу понять, почему.

Код компонента выглядит следующим образом

 const PosListDetails = (props: PosListDetailsProps) =gt; {    const{onClose, openPOS, IP, store} = props;  const classes = useStyles();  const poslists = useSelector((state: RootState) =gt; state.server.posLists);  const loading = useSelector((state: RootState) =gt; state.server.loading);  const server = useSelector((state: RootState) =gt; state.server.server);  const dispatch = useDispatch();    const handleClose = () =gt; {  onClose();  }    useEffect(() =gt; {  dispatch(fetchPOS(IP, store));  }, []);   const columns: GridColDef[] = [  { field: "col1", headerName: labels.pos(), width: 125 },  { field: "col2", headerName: labels.ip(), width: 125 },  { field: "col3", headerName: labels.version(), width: 125 },  { field: "col4", headerName: labels.status(), width: 125 },  { field: "col5", headerName: labels.timestamp(), width: 175 },  { field: "col6", headerName: labels.hardware(), width: 200 },  { field: "col7", headerName: labels.printer(), width: 125 },  ]   const rows = (): GridRowsProp =gt; {  return poslists.map(pos =gt; ({  id: pos.id,  col1: pos.workStationID,  col2: pos.ip,  col3: pos.version,  col4: pos.status,  col5: pos.dateTimeStamp,  col6: pos.hardware,  col7:pos.printer,  }));  };    return(  lt;Dialog onClose={handleClose} open={openPOS} classes={{ paper: classes.paper }}gt;  lt;DialogTitle gt;  lt;Typography style={{ fontSize: 22 }} gt;  {labels.pos_list()   " - "   labels.store()   " "   server.loja}  lt;/Typographygt;  lt;Typography style={{ fontSize: 15 }} gt;  {labels.ip()   " "   server.unifo2ip}  lt;/Typographygt;  {onClose ? (  lt;IconButton style={{  position: 'absolute',  right: 8,  top: 8,  }}  aria-label="close"  onClick={handleClose}  gt;  lt;CloseIcon /gt;  lt;/IconButtongt;  ) : null}  lt;/DialogTitlegt;  lt;DialogContent gt;  lt;Grid item xs={12} style={{marginTop: "5px"}}gt;  lt;TableContainer className={classes.tableContainer}gt;  lt;StyledDataGrid columns={columns} rows={rows()} loading={loading} /gt;  lt;/TableContainergt;  lt;/Gridgt;  lt;/DialogContentgt;  lt;/Dialog gt;  )  }  export default PosListDetails;