[英]Was rendering arrays of arrays of objects, keep getting “Warning: Each child in a list should have a unique ”key“ prop.”
I have an object that contains array of arrays. 我有一个包含数组数组的对象。 I was able to make it render the way I wanted.
我能够按照我想要的方式进行渲染。 However, the React key is giving me trouble;
但是,React密钥给我带来了麻烦。 throwing this "Warning: Each child in a list should have a unique "key" prop."
抛出此“警告:列表中的每个孩子都应该有一个唯一的”关键”道具。”
I have tried giving a unique 'id' property within the original array object for each element in each array but did not help. 我尝试为每个数组中的每个元素在原始数组对象中提供唯一的'id'属性,但没有帮助。
I also looked through these but I think I have all of the suggestions there: Each child in an array or iterator should have a unique "key" prop in reactjs Warning: Each child in a list should have a unique "key" prop Warning: Each child in an array or iterator should have a unique "key" prop. 我也仔细研究了这些内容,但是我想那里有所有建议: 数组或迭代器中的 每个子代在 reactjs中都应具有唯一的“键”属性 警告:列表中的每个子代 应具有唯一的“键”属性 警告:数组或迭代器中的每个子代都应具有唯一的“键”道具。 Check the render method of `ListView`
检查`ListView`的渲染方法
My object 我的对象
const courses =
[
{
name: 'Half Stack application development',
id: 'Half Stack application development',
parts: [
{
name: 'Fundamentals of React',
exercises: 10,
id: 'Fundamentals of React'
},
{
name: 'Using props to pass data',
exercises: 7,
id: 'Using props to pass data'
},
{
name: 'State of a component',
exercises: 14,
id: 'State of a component'
},
{
name: 'Redux',
exercises: 11,
id: 'Redux'
}
]
},
{
name: 'Node.js',
id: 'Node.js',
parts: [
{
name: 'Routing',
exercises: 3,
id: 'Routing'
},
{
name: 'Middlewares',
exercises: 7,
id: 'Middlewares'
}
]
}
]
ReactDOM.render(<App course={courses}/>, document.getElementById('root'));
This is the callback order: 这是回调顺序:
App -> Courses -> Course -> {Header, Content -> Part} 应用->课程->课程-> {标题,内容->部分}
const App = ({course}) => {
return (
<>
<Courses course={course} />
</>
)
}
const Courses = ({course}) => {
console.log("Starting.....")
const courseList = course.map(nameConent => nameConent)
// console.log(courseList)
// const idList = courseList.map(eachCourse =>eachCourse.id)
const mapEverything = () => courseList.map(a => <Course name={a.name} partsList={a.parts} id={a.id}/>)
// const mapEverything = () => courseList.map(a => console.log(a.id))
// console.log("CourseID",idList)
return (
<>
{mapEverything()}
</>
)
}
const Course = ({name,partsList,id}) => {
// console.log(name)
console.log("CourseID", id)
return (
<>
<div key={id}>
<Header header={name} id={id}/>
<Content contents={partsList} id={id+"======"}/>
</div>
</>
)
}
const Content = ({contents,id}) => {
console.log("contentsID",id)
const partList = () => contents.map(part =>
<Part
name={part.name}
id={part.id}
exercises={part.exercises}
/>
)
const getSumofArray = (accumulator, currentValue) => accumulator + currentValue
const exeList = contents.map(content => content.exercises).reduce(getSumofArray)
// console.log(exeList)
return (
<>
<ul key={id}>
{partList()}
</ul>
<b>total exercises: {exeList}</b>
</>
)
}
const Header = ({header, id}) => {
console.log("HeaderID", id)
return (
<>
<h1 key={id}>
{header}
</h1>
</>
)
}
const Part = ({name, id, exercises}) => {
console.log("PartID", id)
return (
<>
<li key={id}>
{name}: {exercises}
</li>
</>
)
}
It's having trouble at the Courses and Content component. 在“课程和内容”组件上遇到了麻烦。
screenshot of warnings: https://drive.google.com/open?id=1kcLlF0d90BG6LXPojDtfSlBFGafC9HC_ 警告屏幕截图: https : //drive.google.com/open?id=1kcLlF0d90BG6LXPojDtfSlBFGafC9HC_
I think a problem is here: 我认为这里是一个问题:
const mapEverything = () => courseList.map(a => <Course name={a.name} partsList={a.parts} id={a.id}/>)
You should try add key here: 您应该尝试在此处添加密钥:
const mapEverything = () => courseList.map(a => <Course name={a.name} partsList={a.parts} id={a.id} key={a.id}/>)
And here too: 这里也是:
const partList = () => contents.map(part =>
<Part
name={part.name}
id={part.id}
exercises={part.exercises}
key={part.id}
/>)
Here is a good explanation of why you need to do it this way. 这很好地解释了为什么您需要这样做。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.