**已关闭。**此问题为not reproducible or was caused by typos。它目前不接受答案。
这个问题是由打字错误或不能再复制的问题引起的。虽然类似的问题在这里可能是on-topic,但这个问题的解决方式对未来的读者不太可能有帮助。
10小时前就关门了。
Improve this question
我的QuestionList.jsx文件代码是
import React from 'react'
import Questions from './Questions'
const QuestionList = ({questionList}) => {
return (
<>
{questionList.map((question) => (
<Questions question={question} key={question.id}/>
))}
</>
)
}
export default QuestionList
我在渲染东西时得到的错误是可见的,但在控制台中得到这个错误,链接没有得到它。
react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop.
Check the render method of `QuestionList`. See https://reactjs.org/link/warning-keys for more information.
at Questions (http://localhost:3000/static/js/bundle.js:872:5)
at QuestionList (http://localhost:3000/static/js/bundle.js:794:5)
at div
at div
at HomeMainbar (http://localhost:3000/static/js/bundle.js:596:81)
at div
at div
at Questions
at Routes (http://localhost:3000/static/js/bundle.js:42703:5)
at AllRoutes
at Router (http://localhost:3000/static/js/bundle.js:42636:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:41445:5)
at div
at App
import React from 'react'
import { Link } from 'react-router-dom'
const Questions = ({question}) => {
return (
<div className='display-question-container'>
<div className='display-votes-ans'>
<p>{question.upVotes}</p>
<p>Up Votes</p>
</div>
<div className='display-votes-ans'>
<p>{question.downVotes}</p>
<p>Down Votes</p>
</div>
<div className='display-votes-ans'>
<p>{question.noOfAnswer}</p>
<p>Answers </p>
</div>
<div className="display-question-details">
<Link to={'/Questions/${question.id}'} className='question-title-link'>{question.questionTitle}</Link>
<div className='display-tags-time'>
<div className='display-tags'>
{
question.questionTags.map((tag) =>(
<p key={tag}>{tag}</p>
))
}
</div>
<p className='display-time'>
asked{question.askedOn} { question.userPosted }
</p>
</div>
</div>
</div>
)
}
export default Questions
这是我的问题.jsx文件
问题数组为:
var questionsList = [{
_id: '1',
upVotes: 3,
downVotes: 2,
noOfAnswers: 2,
questionTitle:"What Is Function Hmm?",
questionBody:"It Meant To Be",
questionTags:["javascript", "r", "python"],
userPosted: "mano",
userId: 1,
askedOn:"jan 1",
answer: [{
answerBody: "Answer",
userAnswered: "kumar",
answerOn: "jan 2",
userId: 2,
}]
},{
_id: '2',
upVotes: 3,
downVotes:2,
noOfAnswers: 0,
questionTitle:"What Is Function In JS?",
questionBody:"It Meant To Be",
questionTags:["javascript", "python"],
userPosted: "lano",
userId: 1,
askedOn:"jan 1",
answer: [{
answerBody: "Answer",
userAnswered: "kumar",
answerOn: " jan 2",
userId: 2,
}]
},{
_id: '3',
upVotes: 1,
downVotes:0,
noOfAnswers: 1,
questionTitle:"How To Use A Function?",
questionBody:"By Adding Const",
questionTags:["javascript", "r", "python", "Css"],
userPosted: "mano",
userId: 1,
askedOn:"jan 2",
answer: [{
answerBody: "Answer",
userAnswered: "kumar",
answerOn: " jan 2",
userId:2,
}]
}]
4条答案
按热度按时间nhaq1z211#
<问题>
mcvgt66p2#
正如在您的另一篇帖子Reactjs Warning: child in a list should have a unique key" prop中看到的,您的问题列表不包含
id
作为问题的属性。相反,您应该使用_id
属性。44u64gxh3#
正如评论中提到的,你的问题中应该有一些重复的ID。为了避免此错误,您可以使用index而不是id,例如:
gajydyqb4#
也许您的数据具有相同的id。检查您的数据或在您Map数据的位置添加第二个参数:index。
并用索引替换键的值。