刷新后未定义数据

Question

我的react and express/mongodb应用程序有一个问题，第一次加载的miscData没有定义(这是我在mongodb数据库中的集合的名称)，但当我注释掉所有段落标记，只有console.log(getBasic)时，我可以记录它(以前由于未定义而无法记录它)，然后当我取消注释段落标记时，我现在可以看到它们，直到我刷新，它重置了这个。

我有一个console.log语句，然后是显示博客标题的3个html段落。当我第一次启动时，它不起作用，直到我执行了上面提到的注释保存、取消注释保存和刷新方法。

这是一段1分钟的视频，展示了我在说什么，如果这没有多大意义的话。

App.js:

function App() {
const [getBasic, setGetBasic] = useState()
async function fetchData() {
await axios.get('http://localhost:3001/api')
.then(result => setGetBasic(result.data))

}

useEffect(() => {
fetchData()
}, [])

return (
<div className="App">
<p>{JSON.stringify(getBasic.miscData[1].blogTitle)}</p>
<p>{JSON.stringify(getBasic.miscData[2].blogTitle)}</p>
<p>{JSON.stringify(getBasic.miscData[3].blogTitle)}</p>
{console.log(`getBasic ${JSON.stringify(getBasic)}`)}
</div>
);
}
export default App;

server.js:

app.get('/api', (req, res) => {
res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
res.header(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept'
);
db.collection('miscData').find().toArray((err, result) => {
if (err) return console.log(err)
res.send({ miscData: result })
})
})

这就是miscData的样子：

getBasic {"miscData":[{"_id":"62604421b57b621bda4171c7","blogTitle":"Different title","blogBody":"lorem ipsum etc etc etc"},{"_id":"626058bb61967575695bdade","blogTitle":"Com squadron","blogBody":"asidjaoisdoasodjiaosjdoia"},{"_id":"626059f961967575695bdadf","blogTitle":"test","blogBody":"test"},{"_id":"62605a3d36e02b8581f56154","blogTitle":"asdasda","blogBody":"adadada"},{"_id":"62608bc60bd6de526fd1b0bc","blogTitle":"new title","blogBody":"new body"}]}

我的React是3000端口，服务器是3001

Answer 1

实际上方法fetchData()是一个异步调用，即术语异步是指两个或多个不存在或不同时发生的对象或事件(或多个相关的事情在没有等待前一个完成的情况下发生)链接。

尽管<p>标记是同步代码，但它们甚至在从后端获取数据之前就已经呈现了。因此，您会在一段时间内收到未定义的内容，一旦它被提取，<p>标记就会被填充，并且您可以看到它们。这也解释了为什么当你刷新它时它会重置