(发现：[对象承诺])与材料UI和DexieJS

Question

这是我第一次使用DexieJS和Material，所以我可能缺少一个关键的部分。但是下面是我代码的相关部分：

Subscreen.tsx

const [fightersArray, setFightersArray] = useState<FighterEntity[]>([]);

useEffect(()=>{
    loadFighters();
},[]);

const loadFighters = async ()=>{
    const fighters = await databaseManager.getFightersWithNoOrgs();
    setFightersArray(fighters);   
}

...

return (
   <DataGrid
      rows={fightersArray}
      columns={columns}
      checkboxSelection
      onSelectionModelChange={(newSelection) =>{
       setSelectedFighters(newSelection.selectionModel);
      }}
   />
)

DatabaseManager.tsx

public async getFightersWithNoOrgs() : Promise<FighterEntity[]>{
        const fighters = await this.db.fighters.filter((fighter)=> {
            return fighter.currentOrgID == null
        }).toArray();
        return fighters;
    }

这是我第一次浏览页面时遇到的错误信息

Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

我能够将从console.log返回的数组从databaseManager中去掉，所以我知道结果是正常的，就像一个对象数组。

当我不使用承诺结构或DexieJS时，我经常使用这些代码。所以我介绍了这个变化，但我认为我的承诺结构正确，我对反应挂钩的理解也是正确的。

我也得到了一些其他的错误，但我认为他们只是级联从原来的一个。如果它们可能相关的话，很乐意提供。

Answer 1

我发现了这个问题，而且它不存在于我上面发布的代码中。

在设置列时，我有以下代码：

    {   
        field: 'ranking', 
        headerName: 'Rank', 
        width: 100,
        renderCell : (params : GridCellParams)=>(
            <span>{getRanking(params)}</span>
        )
    },  

getRanking实际上是一个异步函数，它在这里抛出了这个问题。

愚蠢的错误在我的一端，但希望这有助于其他人！