刷新后數據未定義

Question

我的 react 和 express/mongodb 應用程序存在問題，其中未定義第一個加載miscData （這是我的 mongodb 數據庫中我的集合的名稱），但是當我注釋掉所有段落標簽並且僅注釋掉console.log(getBasic)我能夠記錄它（之前由於未定義而無法記錄它）然后當我取消注釋段落標簽時我現在能夠看到它們，直到我刷新它重置它。

我有一個 console.log 語句，然后是顯示 blogTitles 的 3 html 段落。 當我第一次啟動時它不起作用，直到我執行上面提到的注釋保存、取消注釋保存、刷新方法。

這是一個 1 分鍾的視頻，展示了我在說什么，如果這沒有多大意義的話。

應用程序.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;

服務器.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>標簽是同步代碼，但它們甚至在您的數據從后端獲取之前就已呈現。 因此，您會在一段時間內收到 undefined，一旦它被獲取， <p>標簽就會被填充，您可以看到它們。 這也解釋了為什么它會在您刷新時重置。