import React, { useContext , useEffect } from 'react'
import noteContext from '../context/notes/noteContext';
import AddNote from './AddNote';
import NoteItem from './NoteItem';
const Notes = () => {
const context = useContext(noteContext);
const { notes, getNotes } = context;
useEffect(() => {
getNotes()
}, [])
return (<>
<AddNote />
<div className=" row my-3 mx-3">
<h3>YOUR NOTE</h3>
{notes.map((note) => {
return <NoteItem key={note._id} note={note} />
})}
</div>
</>
)
}
export default Notes;
這是我正在渲染并使用 id 作為鍵的代碼
// API CALL
const response = await fetch(`${host}/api/notes/fetchallnotes`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
"auth-token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNjJiNDRmMjIzNWVhZmNkM2FhODRmMTg1In0sImlhdCI6MTY1NTk4NzgyNH0.LRueOf_bDWJB6NJ5jmN-ZQxStPPUt0ppW2G0s5VcRr4"
},
});
const json = await response.json()
console.log(json);
setNotes(json);
}
在這里，我正在獲取筆記，這不是我第一次遇到這個問題，這是我的整個控制臺錯誤 react_devtools_backend.js:4026 警告：串列中的每個孩子都應該有一個唯一的“關鍵”道具。
檢查Notes. 有關更多資訊，請參閱https://reactjs.org/link/warning-keys。在 NoteItem (http://localhost:3000/static/js/bundle.js:781:68) 在 Notes (http://localhost:3000/static/js/bundle.js:923:68) 在 div 在 Home在 Routes (http://localhost:3000/static/js/bundle.js:40285:5) 在 div 在 Router (http://localhost:3000/static/js/bundle.js:40218:15) 在 BrowserRouter (http://localhost:3000/static/js/bundle.js:39693:5) 在 NoteState (http://localhost:3000/static/js/bundle.js:1033:76) 在 App
誰能告訴我我在哪里得到錯誤以及我應該分享哪個檔案以便你可以幫助我或者我應該在哪里作業以消除這個錯誤
它向我顯示錯誤請幫助我
uj5u.com熱心網友回復：
能否請您使用index代替note._id，因為note._id可能重復，您會收到警告，所以您可以使用index代替note._id。
{notes.map((note, index) => {
return <NoteItem key={index} note={note} />
})}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/497504.html
標籤：javascript 反应 反应钩子 反应路由器