材质 UI Datagrid 数据未填充

Question

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

我正在使用 useEffect() 从我的管理组件中的 Express 服务器获取我的数据，然后将其反馈给我的 EventTable 组件。我的状态存储在 MobX 存储中，您可以看到我正在解构每个组件的顶部。我对 React 比较陌生，所以仍然习惯了这些模式，也许我错过了一些愚蠢的东西？下面是一些关键的sn-ps。

事件表组件

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 组件的问题在于它没有对状态变化做出反应。