列表中的每个孩子都应该有一个唯一的“关键”道具，React答案

【问题标题】：Each child in a list should have a unique "key" prop, React列表中的每个孩子都应该有一个唯一的“关键”道具，React
【发布时间】：2021-11-11 07:59:50
【问题描述】：

我有这样的jsx：

import React from 'react'
import { Grid, Image } from 'semantic-ui-react'

const RowComponent = ({ rowList, personToFind }) => 
  <Grid.Row columns={3} centered>
    {rowList.map(person =>
      <Grid.Column key={person.id}>
        <ImageComponent person={person} personToFind={personToFind} />
      </Grid.Column>)
    }   
  </Grid.Row>

const GamePage = React.memo(({ peopleList }) => {
  const randomPeopleList = getNRandomItems(peopleList, 6)
  
  const topRow = randomPeopleList.slice(0, 3)
  const bottomRow = randomPeopleList.slice(3)
  const personToFind = getRandomItem(randomPeopleList)
  
  return (
    <Grid>
      <RowComponent rowList={topRow} personToFind={personToFind} />
      <RowComponent rowList={bottomRow} personToFind={personToFind} />
    </Grid>
  ) 
})

错误告诉Check the render method of RowComponent。我尝试将key 放在Grid.Row、RowComponent 和ImageComponent（以及其中的Image）上。这些都不起作用，所以我很困惑我应该把钥匙放在哪里。根据线程：

Warning: Each child in a list should have a unique "key" prop

它应该是最外面的元素，但我把它放在最外面的Grid.Row，RowComponent 本身上，它仍然显示。我验证person.id 是唯一的id。

更新

有两个相同类型的错误。第一个是：

我通过为Grid.Column 生成不同的key 来消除它：

const RowComponent = ({ rowList, personToFind }) => 
  <Grid.Row columns={3} centered>
    {rowList.map((person, idx) =>
      <Grid.Column key={`column-${idx}-img-${person.id}`}>
        <ImageComponent person={person} personToFind={personToFind} />
      </Grid.Column>)
    }   
  </Grid.Row>

我不明白为什么需要这样做，因为每个 person.id 都是独一无二的。另一个错误仍然存在：

【问题讨论】：

它必须在您正在生成的数组的最外层元素上，在您的情况下是Grid.Column。
您正确放置了密钥。您可能忘记向另一个组件添加密钥。搜索“.map(”并检查是否所有映射的最外层组件都定义了键
我该死的肯定<ImageComponent key={Math.random()} />
你能发布你得到的确切错误吗？
刚刚更新了票。在Image 和ImageComponent 上尝试了Math.random() - 不起作用。

标签： reactjs

【解决方案1】：

import React from 'react'
import { Grid, Image } from 'semantic-ui-react'

const RowComponent = ({ rowList, personToFind }) => 
  <Grid.Row columns={3} centered>
    {rowList.map((person,index) =>
      <Grid.Column key={person.id+""+index}>
        <ImageComponent person={person} personToFind={personToFind} />
      </Grid.Column>)
    }   
  </Grid.Row>

const GamePage = React.memo(({ peopleList }) => {
  const randomPeopleList = getNRandomItems(peopleList, 6)
  
  const topRow = randomPeopleList.slice(0, 3)
  const bottomRow = randomPeopleList.slice(3)
  const personToFind = getRandomItem(randomPeopleList)
  
  return (
    <Grid>
      <RowComponent rowList={topRow} personToFind={personToFind} />
      <RowComponent rowList={bottomRow} personToFind={personToFind} />
    </Grid>
  ) 
})

{rowList.map((person,index) =>
      <Grid.Column key={person.id+" "+index}>
        <ImageComponent person={person} personToFind={personToFind} />
      </Grid.Column>)
    }

使用 key={person.id+" "+index} 的原因是，key 应该尽可能地唯一。如果您有相同的 person.id 和两个或更多的孩子怎么办？为了处理这样的测试用例，我们正在做那个 key = {person.id+" "+index}

【讨论】：