Javascript 在react material表组件中获取异步数据

我正在使用firebase构建一个小型react应用程序，用于托管和存储数据，我正在使用材质表来显示数据。问题是，当我尝试将数据加载到表中时，出现以下错误：

错误：对象作为React子对象无效（找到：[object Promise]）。如果你想
渲染子对象集合时，请改用数组。
在EditTable中（位于App.js:12）
在div中（在App.js:10中）
应用程序内（位于src/index.js:10）
在StrictMode中（在src/index.js:9处）

这是表的代码：

从“React”导入React；
从“物料表”导入物料表；
从“react”导入{forwardRef}；
从“@material ui/icons/AddBox”导入AddBox；
从“@material ui/icons/arrowdown”导入向下箭头；
从“@material ui/icons/Check”导入检查；
从“@material ui/icons/ChevronLeft”导入ChevronLeft”；
从“@material ui/icons/ChevronRight”导入ChevronRight；
从“@material ui/icons/Clear”导入清除；
从“@material ui/icons/DeleteOutline”导入DeleteOutline；
从“@material ui/icons/Edit”导入编辑；
从“@material ui/icons/FilterList”导入过滤器列表；
从“@material ui/icons/FirstPage”导入第一页；
从“@material ui/icons/LastPage”导入LastPage；
从“@material ui/icons/Remove”导入删除；
从“@material ui/icons/SaveAlt”导入SaveAlt；
从“@material ui/icons/Search”导入搜索；
从“@material ui/icons/ViewColumn”导入ViewColumn；
从“./shotjesDao”导入{getShotjes}
常数表图标={
添加：forwardRef（（道具，ref）=>），
检查：forwardRef（（道具，ref）=>），
清除：forwardRef（（道具，ref）=>），
删除：forwardRef（（道具，ref）=>），
DetailPanel:forwardRef（（道具，ref）=>），
编辑：forwardRef（（道具，ref）=>），
导出：forwardRef（（道具，ref）=>），
过滤器：forwardRef（（道具，ref）=>），
首页：forwardRef（（道具，ref）=>），
最后一页：forwardRef（（道具，ref）=>），
下一页：forwardRef（（道具，ref）=>），
上一页：forwardRef（（道具，ref）=>），
ResetSearch:forwardRef（（道具，ref）=>），
搜索：forwardRef（（道具，ref）=>），
SortArrow:forwardRef（（道具，ref）=>），
第三阶段检查：forwardRef（（道具，ref）=>），
ViewColumn:forwardRef（（道具，ref）=>）
};
导出默认异步函数EditTable（）{
常量[状态，设置状态]=React.useState({
栏目：[
{title:'ID'，field:'ID'，type:'numeric'}，
{标题：'uitdeler'，字段：'uitdeler'}，
{标题：'ontvanger'，字段：'ontvanger'}，
{title:'uitgeeld'，field:'uitgeeld'，查找：{1:true，0:false}，}，
{标题：'datum'，字段：'datum'，
},
],
数据：getShotjes（），
});
返回(
);

这是我的简单dao文件，不包括配置文件：

从“firebase/app”导入firebase
导出异步函数getShotjes（）{
试一试{
要求（“消防基地/消防仓库”）；
常量firebaseConfig={
};
如果（！firebase.apps.length）{
firebase.initializeApp（firebaseConfig）；
}
var db=firebase.firestore（）；
const snapshot=await db.collection（'shotjes'）.get（）；
返回snapshot.docs.map（doc=>doc.data（））；
}
捕获（e）{
控制台日志（e）；
}
}

编辑：

因此，添加一个useEffect挂钩并拆分数据和列状态可以消除所有错误。尽管我仍然没有看到任何数据出现在表中。我的表组件现在看起来如下所示：

export default function EditTable() {

var [state, setState] = React.useState({
    columns: [
        { title: 'ID', field: 'id' , type: 'numeric' },
        { title: 'Uitdeler', field: 'uitdeler' },
        { title: 'Ontvanger', field: 'ontvanger' },
        { title: 'Uitgedeeld', field: 'uitgedeeld', lookup: { 1: true, 0: false },},
        { title: 'Datum', field: 'datum',
        },
    ],
});

var [data, setData] = React.useState([]);

console.log(JSON.stringify(data));

useEffect(() => {
    (async () => {
        const result = await getShotjes();
        console.log(result);
        setData(result);
    })();
}, []);


return (
    <MaterialTable
        title="Editable Example"
        columns={state.columns}
        data={data.data}
        icons={tableIcons}
    />
);
}

导出默认函数EditTable（）{
var[state，setState]=React.useState({
栏目：[
{title:'ID'，field:'ID'，type:'numeric'}，
{标题：'Uitdeler'，字段：'Uitdeler'}，
{标题：'Ontvanger'，字段：'Ontvanger'}，
{title:'uitgeeld'，field:'uitgeeld'，查找：{1:true，0:false}，}，
{标题：'Datum'，字段：'Datum'，
},
],
});
var[data，setData]=React.useState（[]）；
log（JSON.stringify（data））；
useffect（（）=>{
（异步（）=>{
const result=wait getShotjes（）；
控制台日志（结果）；
设置数据（结果）；
})();
}, []);
返回(
);
}

我就是这样修复的，我还添加了添加删除数据的功能

EditTable.js：

export default function EditTable() {

var [state, setState] = React.useState({
    columns: [
        { title: 'ID', field: 'id', type: 'numeric', editable: false},
        { title: 'Uitdeler', field: 'uitdeler' },
        { title: 'Ontvanger', field: 'ontvanger' },
        { title: 'Datum', field: 'datum', type: 'date'},
    ],
});

var [data, setData] = React.useState([]);
const [isLoading,setIsLoading] = useState(false);

useEffect(() => {
    // By moving this function inside the effect, we can clearly see the values it uses.
    setIsLoading(true);
    async function fetchProduct() {
        if (!firebase.apps.length) {
            firebase.initializeApp(firebaseConfig);
        }

        setData(await getShotjes());
        setIsLoading(false);

    }

    fetchProduct();
}, []);

const handleCreateShotje = async (shotje)  => {
    setIsLoading(true);
    await addShotje(shotje).then(async () => {
        setData(await getShotjes());
    });
    setIsLoading(false);
};
const handleDeleteShotje = async (id)  => {
    setIsLoading(true);
    await removeShotje(id).then(async () => {
        setIsLoading(true);
        setTimeout(async function () {{
            setData(await getShotjes());
            }
        }, 400);
        setIsLoading(false);
    });

};

return (
    <MaterialTable

        title="Shotjes"
        columns={state.columns}
        data={(data)}
        icons={tableIcons}
        isLoading={isLoading}
        editable={{
            isEditable: rowData => rowData.name === "id", // make id not editable
            onRowAdd: (newData) => handleCreateShotje(newData),
            onRowDelete: (oldData) => handleDeleteShotje(oldData.id)

        }}
    />

);
}

导出默认函数EditTable（）{
var[state，setState]=React.useState({
栏目：[
{title:'ID'，field:'ID'，type:'numeric'，editable:false}，
{标题：'Uitdeler'，字段：'Uitdeler'}，
{标题：'Ontvanger'，字段：'Ontvanger'}，
{标题：'Datum'，字段：'Datum'，类型：'date'}，
],
});
var[data，setData]=React.useState（[]）；
const[isLoading，setIsLoading]=useState（false）；
useffect（（）=>{
//通过在效果中移动此函数，我们可以清楚地看到它使用的值。
设置加载（真）；
异步函数fetchProduct（）{
如果（！firebase.apps.length）{
firebase.initializeApp（firebaseConfig）；
}
setData（等待getShotjes（））；
设置加载（假）；
}
fetchProduct（）；
}, []);
const handleCreateShotje=异步（shotje）=>{
设置加载（真）；
等待addShotje（shotje）。然后（异步（）=>{
setData（等待getShotjes（））；
});
设置加载（假）；
};
const handleDeleteShotje=async（id）=>{
设置加载（真）；
等待removeShotje（id）。然后（async（）=>{
设置加载（真）；
setTimeout（异步函数（）{{
setData（等待getShotjes（））；
}
}, 400);
设置加载（假）；
});
};
返回(
rowData.name==“id”，//使id不可编辑
onRowAdd：（newData）=>handleCreateShotje（newData），
onRowDelete：（oldData）=>handleDeleteShotje（oldData.id）
}}
/>
);
}

在

useffect

ho中调用

getShotjes（）