[英]Warning: Each child should have a unique key - Passing Array In ReactJS
I was practicing ReactJS tuts on Scrimba where you have to pass id props in array我在 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;
Then I got a warning in console:然后我在控制台中收到警告:
Warning log警告日志
In the image above the key value was passed but I still got the warning message.在上图中,键值已通过,但我仍然收到警告消息。 I'm trying to pass the elements into a single object.我正在尝试将元素传递到单个对象中。 Can anyone help me find the problem here?谁能帮我在这里找到问题?
You can add key
attribute and pass in that joke.id
.您可以添加key
属性并传入该joke.id
。
const jokeComponents = jokesData.map(function(joke) {
return (
<Joke
obj={{key: joke.id, question: joke.question, punchline: joke.punchLine}}
key={joke.id)
/>
)
})
You have to pass key as prop to Joke component.您必须将密钥作为道具传递给 Joke 组件。 id would be great choice because of how react reconciliation work. id 将是不错的选择,因为 react 和解的工作方式。
<Joke key={joke.id}
obj={{key: joke.id, question: joke.question, punchline: joke.punchLine}}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.