Reactjs呈现错误列表中的每个子级都应该有唯一的“key”道具[Closed]

l2osamch  于 2022-09-21  发布在  React
关注(0)|答案(4)|浏览(138)

**已关闭。**此问题为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,
    }]

  }]
nhaq1z21

nhaq1z211#

<问题>

write this code below :

     <Link to={pathname: "/Questions"}>{question.questionTitle}</Link>

or you can write like this also :

This is the actual answer for your code :
    <Link to={`/Questions/${question.id}`} className='question-title-link'>{question.questionTitle}</Link>
mcvgt66p

mcvgt66p2#

正如在您的另一篇帖子Reactjs Warning: child in a list should have a unique key" prop中看到的,您的问题列表不包含id作为问题的属性。相反,您应该使用_id属性。

questionList.map((question) => (
    <Questions question={question} key={question._id}/>
))
44u64gxh

44u64gxh3#

正如评论中提到的,你的问题中应该有一些重复的ID。为了避免此错误,您可以使用index而不是id,例如:

import React from 'react'
import Questions from './Questions'

const QuestionList = ({questionList}) => {
  return (
    <>
        {
            questionList.map((question, index) => (
                <Questions question={question} key={index} />
           ))
        }
    </>
  )
}
gajydyqb

gajydyqb4#

也许您的数据具有相同的id。检查您的数据或在您Map数据的位置添加第二个参数:index。

并用索引替换键的值。

questionList.map((question, index) => (
                <Questions question={question} key={index}/>
           ))

相关问题