react · JavaScript
報錯原文
Each child in a list should have a unique "key" prop.
這是什麼意思
作為列表算繪的兄弟元素沒有 key，於是下一次算繪時 React 無法把它們和同一批資料對應起來。你用 items.map(...) 造元素時漏了 key；這只是警告，介面照樣畫得出來，但列表一變它就以無聲的問題回來——症狀是輸入框的值或動畫留在了錯誤的那一行。用資料裡穩定的 id 作 key。用陣列索引當 key，只有在順序永不改變、也從不在中間插入或刪除的列表裡才安全，否則它重現的幾乎就是「沒有 key」的那個問題。從 React 19 起，前面的 Warning: 不再出現。
怎麼修
這個沒有一行命令能解決。說明裡寫了該看哪裡。
- 來自
- react
- JavaScript
- 15
瀏覽器和 node 的錯誤通常只告訴你什麼壞了，不告訴你那個值為什麼變成這樣——你讀了 undefined、它不是函式、它不是 JSON——所以該修的地方在拋錯那一行的上游；只用 ?. 和預設值把那一行按住，同樣的問題會在更遠的地方、以更難辨認的樣子回來。
怎麼讀報錯
- 從第一行往下讀。越往下越是工具內部的事，起因通常寫在最上面。
- 有檔名和行號就從那裡查——不是堆疊最上面那一格，而是最上面那條提到你自己寫的檔案的行。
- 把報錯原文照樣去搜，但先去掉你自己的路徑和變數名，正是那些讓搜尋比對不上。
- 同一種情況在不同版本裡措辭不同。結果不對頭，就把版本號一起加進查詢。
- 貼上修法之前，先確認它會丟掉什麼。這裡面有些是不能收回的。
常見問題
Q. “Each child in a list should have a unique "key" prop.” 是什麼意思？
作為列表算繪的兄弟元素沒有 key，於是下一次算繪時 React 無法把它們和同一批資料對應起來。你用 items.map(...) 造元素時漏了 key；這只是警告，介面照樣畫得出來，但列表一變它就以無聲的問題回來——症狀是輸入框的值或動畫留在了錯誤的那一行。用資料裡穩定的 id 作 key。用陣列索引當 key，只有在順序永不改變、也從不在中間插入或刪除的列表裡才安全，否則它重現的幾乎就是「沒有 key」的那個問題。從 React 19 起，前面的 Warning: 不再出現。
Q. 怎麼修？
沒有一行命令能解決。上面的說明寫了該看哪裡。
Q. 這是哪個工具報的？
react。它屬於JavaScript，報錯原文有 11 個詞。
相關報錯
Objects are not valid as a React child (found: object with keys {name, id})reactToo many re-renders. React limits the number of renders to prevent an infinite loop.reactUncaught TypeError: Cannot read properties of undefined (reading 'name')chromeTypeError: items.map is not a functionchromeRangeError: Maximum call stack size exceedednodeSyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSONchrome 111+SyntaxError: Unexpected end of JSON inputchromeTypeError: Failed to fetchchrome