我的 react 和 express/mongodb 應用程式存在問題,其中miscData未定義第一次加載(這是我的 mongodb 資料庫中我的集合的名稱),但是當我注釋掉所有段落標簽并且只有console.log(getBasic)我能夠記錄它時(在我因為未定義而無法記錄它之前)然后當我取消注釋段落標簽時,我現在可以看到它們,直到我重繪 它重置它。
我有一個 console.log 陳述句,然后是 3 個顯示 blogTitles 的 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;
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
uj5u.com熱心網友回復:
實際上該方法fetchData()是一個異步呼叫,即術語異步是指兩個或多個物件或事件不存在或同時發生(或多個相關的事情發生而不等待前一個完成)鏈接。
盡管<p>標簽是同步代碼,但它們甚至在從后端獲取資料之前就呈現了。因此,您會收到 undefined 一段時間,并且一旦獲取它,<p>標簽就會被填充并且您可以看到它們。這也解釋了為什么重繪 時它會重置。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/467808.html
標籤:javascript 节点.js mongodb 表示 梅尔
