未填充的资料UI资料

Question

我遇到了一个很难搞清楚的问题。我正在使用物质UI数据，但我似乎无法让它填充数据，我也不明白为什么。当我查看我的组件分析器时，我可以看到我试图显示的数据就在那里，所以我无法理解为什么没有行。

我正在使用useEffect()从我的管理组件中的快捷服务器获取数据，然后将数据反馈到我的EventTable组件。我的状态存储在一个MobX存储中，您可以看到，我正在每个组件的顶部解构。我是比较新的反应，所以还是习惯了模式，也许我错过了什么愚蠢的东西？下面是一些关键片段。

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