物料UI数据网格数据未填充

Question

我遇到了一个我正在努力弄清真相的问题。我正在使用Material UI Datagrids，但我似乎无法用数据填充它，我也不明白为什么。当我查看组件探查器时，我可以看到我试图显示的数据就在那里，所以我不明白为什么没有行。

我正在使用useEffect((从管理组件中的Express Server获取数据，然后将其反馈到EventTable组件。我的状态存储在MobX商店中，你可以看到我在每个组件的顶部解构它。我对React还比较陌生，所以还在习惯这些模式，也许我错过了一些愚蠢的东西？以下是一些关键片段。

EventTable组件

import React from 'react'
import { useStore } from '../../../Stores/store';
import { DataGrid, GridActionsCellItem, GridColDef, GridRowParams, GridRowsProp } from '@mui/x-data-grid';
import { Edit } from '@mui/icons-material';
export default function EventTable() {
const { generalStore} = useStore();
const { events, setSelectedEvent } = generalStore;
let rows: GridRowsProp = [...events];
const columns: GridColDef[] = React.useMemo(() => [
{ field: 'name', headerName: 'Title', flex: 1},
{ field: 'date_time', headerName: 'Date', flex:1 },

], []);
return (
<DataGrid rows={rows} columns={columns} autoPageSize={true} autoHeight={true} />
)
}

管理组件

import React, { useEffect } from 'react'
import { useStore } from '../../Stores/store'
import EventForm from './EventForm/EventForm';
import EventTable from './EventForm/EventTable';
import './Management.css'
import NewsForm from './NewsForm/NewsForm';
export default function Management() {
const { generalStore } = useStore();
const { haveNewsAndEvents, getNewsAndEvents, updateHaveNewsAndEvents, setIsManagement } = generalStore;

useEffect(() => {
setIsManagement(true);
if(!haveNewsAndEvents){
getNewsAndEvents();
updateHaveNewsAndEvents(true);
} 
}, [haveNewsAndEvents]);
return (
<div >
<div className="paper">
<div className="newsEventForm">
<h2>Event Management</h2>
<EventForm />
<EventTable />
</div>
<div className="newsEventForm">
<h2>News Management</h2>
<NewsForm />
</div>
</div>
</div>
)
}

非常感谢任何帮助

Answer 1

我认为您可能对数据流有问题。首先，这是一个假设，因为我没有看到完整的画面。

getNewsAndEvents();
updateHaveNewsAndEvents(true);

在这里，我假设getNewsAndEvents操作触发异步调用，并且看起来您正在调用后的下一行中设置haveNewsAndEvents。因此，管理组件是在没有事件的情况下呈现的。

可以通过在呼叫完成后移动updateHaveNewsAndEvents来解决。

或者您可以执行以下操作：

export default function EventTable() {
const [rows, setRows] = useState([]);
const { generalStore} = useStore();
const { events, setSelectedEvent } = generalStore;
let rows = [];
useEffect(() => setRows([...events]), [events]);
return (
<DataGrid rows={rows} columns={columns} autoPageSize={true} autoHeight={true} />
)
}

EventTable组件的问题是它没有对状态变化做出反应。