刷新后数据未定义

Question

我的 React 和 express/mongodb 应用程序存在问题，其中第一个加载 miscData 未定义（这是 mongodb 中 collection 的名称数据库），但是当我注释掉所有段落标签并且只有 console.log(getBasic) 我能够记录它（之前由于它未定义我无法记录它）然后当我取消注释段落标签时我是现在可以看到它们，直到我刷新重置它。

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

这里有 1 分钟 video 说明我在说什么，如果这没有多大意义的话。

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()是一个异步调用，即异步是指两个或多个不存在或同时发生的对象或事件（或多个相关的事情发生而无需等待前一个一个完成）link.

虽然 <p> 标签是同步代码，但它们甚至在您的数据从后端获取之前就已呈现。因此，您会在一段时间内收到 undefined，一旦它被获取，<p> 标签就会被填充，您可以看到它们。这也解释了为什么它会在您刷新时重置。

刷新后数据未定义

Data undefined after refresh

javascript

mongodb

node.js

express

mern