警告：每个孩子应该有一个唯一的键-在ReactJS中传递数组

Question

我在Scrimba上练习ReactJS Tut，您必须在数组中传递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

您可以添加AppConstants.FILE_DISTRIBUTE_TAG属性并传递该key。

joke.id

Answer 2

您必须将密钥作为道具传递给笑话组件。 id是一个很好的选择，因为对帐工作如何进行。

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