时间戳

首页 > 解决方案 > 警告：每个孩子都应该有一个唯一的键 - 在 ReactJS 中传递数组

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

问题描述

我在 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;

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

警告日志

警告日志

在上图中，键值已通过，但我仍然收到警告消息。我正在尝试将元素传递到单个对象中。谁能帮我在这里找到问题？

标签： javascriptarraysreactjskey

解决方案

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

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

推荐阅读