Mongo-db中的数据比Next js App中服务器上json文件中的数据来得晚

Question

我有一个表单，它当前使用json文件中的数据。

数据是这样检索的

const categoryList = require('../data/categories.json');

我将对此进行更改，以便从一个从mongodb获取数据的api中检索数据。

http://localhost:3000/api/categories

上面的链接给了我与json文件相同的结果。

import { getCategories } from '../../lib/hooks';
....
const PostEditor = () => {
const [categories] = getCategories(); // this gives me all the categories from api as an array
console.log("categories from db")
console.log(categories)
const catList = require('../data/categories.json'); // same result as above
console.log("cat list from json file")
console.log(catList)
...
...
return (
<>
...
...
<Autocomplete
multiple
options={catList} // Data from db(categories field) does not reach here.
limitTags={2}

从上面的代码中，db中的控制台日志和json文件中的控制台记录在浏览器中具有相同的值。控制台登录命令提示符将来自db的值显示为"0"；未定义"；。我认为来自db的数据没有及时到达页面，但来自json文件的数据确实到达了页面。

如何解决这个问题？

我使用Next js。

编辑：我将从Api获取的数据移动到一个父组件(直接在页面下(，并将类别作为道具传递给子组件

<PostEditor categories={cats}/>

仍然面临同样的问题。

Answer 1

由于mongodb数据是外部的，所以加载需要时间。您必须异步调用。检查如下：

const PostEditor = async() => {
const [categories] = await getCategories(); 
...
}