警告：每個孩子都應該有一個唯一的鍵 - 在 ReactJS 中傳遞數組

Question

我在 Scrimba 上練習 ReactJS tuts，你必須在數組中傳遞 id 道具

 import React from 'react'; import Joke from './components/Joke.js' import jokesData from './components/jokesData'; function App() { const jokeComponents = jokesData.map(function(joke) { return ( <Joke obj={{key: joke.id, question: joke.question, punchline: joke.punchLine}} /> ) }) return ( <div> {jokeComponents} </div> ) } export default App;

然后我在控制台中收到警告：

警告日志

在上圖中，鍵值已通過，但我仍然收到警告消息。 我正在嘗試將元素傳遞到單個對象中。 誰能幫我在這里找到問題？

Answer 1

您可以添加key屬性並傳入該joke.id 。

  const jokeComponents = jokesData.map(function(joke) {
    return (
      <Joke 
        obj={{key: joke.id, question: joke.question, punchline: joke.punchLine}}
        key={joke.id)
      />
    )
  })

Answer 2

您必須將密鑰作為道具傳遞給 Joke 組件。 id 將是不錯的選擇，因為 react 和解的工作方式。

<Joke  key={joke.id}
            obj={{key: joke.id, question: joke.question, punchline: joke.punchLine}} 
          />