错误警告：列表中的每个孩子都应该有一个唯一的“关键”道具

Question

为什么会显示这个错误？

我在我的 React Native 工作室中创建了一个使用 npx react-native init myProyect 创建的应用。

我正在测试使用 'styled-components / native' 添加样式的方法。

我想展示不同的公司，包括它们的名称、地址、公司类型的图标、公司形象和星级。

我为星星添加了 svg 图像。 公司图片，出于测试的目的，我已经通过URL添加了，但是我想从assets文件夹中添加图片，我不知道怎么做。

到目前为止，您可以看到公司图像、星星和 CLOSE 图像，它也是 svg，我从文件中获取。 当我尝试添加图标以显示它所在的公司类别时，图标不显示，并且尽管运行了应用程序，但控制台显示以下错误：

LOG Running "searchYourBusiness" with {"rootTag": 121}
 ERROR Warning: Each child in a list should have a unique "key" prop.

Check the render method of `StoreInfo`. See https://reactjs.org/link/warning-keys for more information.
SvgXml @ http: //10.0.2.2: 8081 / index.bundle? Platform = android & dev = true & minify = false & app = com.searchYourBusiness & modulesOnly = false & runModule = true: 140774: 31
    in StoreInfo (at StorePantalla.js: 31)
    in RCTView (at View.js: 32)
    in View
    in StyledNativeComponent (created by Styled (View))
    in Styled (View) (at StorePantalla.js: 30)
    in RCTView (at View.js: 32)
    in View (at SafeAreaView.js: 41)
    in SafeAreaView
    in StyledNativeComponent (created by Styled (Component))
    in Styled (Component) (at StorePantalla.js: 23)
    in StoreDisplay (at App.js: 35)
    in ThemeProvider (at App.js: 34)
    in App (at renderApplication.js: 48)
    in RCTView (at View.js: 32)
    in View (at AppContainer.js: 106)
    in RCTView (at View.js: 32)
    in View (at AppContainer.js: 133)
    in AppContainer (at renderApplication.js: 41)
    in searchYourBusiness (RootComponent) (at renderApplication.js: 57)

我已经在这个网站上的其他类似答案中寻找解决方案，但我没有设法解决：

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. Check the render method of `ListView`

React Warning: Each child in a list should have a unique "key" prop. in render() function

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

没有其他方法可以纠正错误并显示图标。

如何显示图标并消除错误？

我应该怎么做才能根据我的结构化代码显示资产文件夹中的图标和图像？

我展示了涉及到的文件

文件 App.js

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
import { ThemeProvider } from 'styled-components/native'

import { theme } from './src/theme'

import StorePantalla from './src/features/stores/pantallaStore/StorePantalla'


export default function App() {

  return (
    <ThemeProvider theme={theme}>
      <StorePantalla />
    </ThemeProvider>
  )
  }

const styles = StyleSheet.create({
})

文件 StoreInfo.js

import React from 'react'
import { View, Text, StyleSheet, Image } from 'react-native'
import { Card } from 'react-native-paper'
import styled from 'styled-components/native'
import { SvgXml } from 'react-native-svg'
import star from '../../../../assets/star'
import closed from '../../../../assets/closed'

const StoreCard = styled(Card)`
  background-color: ${(props) => props.theme.colors.bg.secondary}`

const StoreCardCover = styled(Card.Cover)`
  padding: ${(props) => props.theme.space[4]}
  background-color: ${(props) => props.theme.colors.bg.primary}
  `

const Title = styled.Text`
  font-family: ${(props) => props.theme.fonts.heading}
  padding-left: ${(props) => props.theme.space[3]}
  padding-bottom: ${(props) => props.theme.space[1]}
  fontSize: ${(props) => props.theme.sizes[2]}
  color: ${(props) => props.theme.colors.text.primary}
`

const Address = styled(Text)`
  font-family: ${(props) => props.theme.fonts.body}
  padding-left: ${(props) => props.theme.space[3]}
  padding-bottom: ${(props) => props.theme.space[4]}
`

const Info = styled(View)`
  padding: ${(props) => props.theme.space[2]}
`

const Rating = styled(View)`
  flex-direction: row;
  padding-left: ${(props) => props.theme.space[2]}
  padding-bottom: ${(props) => props.theme.space[2]}
`

const Section = styled(View)`
  flex-direction: row;
  align-items: center;
`
const SectionEnd = styled(View)`
  flex: 1;
  flex-direction: row;
  justify-content: flex-end;
`
const Icon = styled(Image)`
  width= 35px;
  height= 35px;
  margin-left: ${(props) => props.theme.space[3]}
`

export const StoreInfo = ({ store = {} }) => {
  const {
    name = "Online Company",
    //image= require('../../../../assets/logos.jpg'),
    //photos = ["https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1125/posts/30546/preview_image/RN.jpg"],

    icon = "https://img.icons8.com/material-two-tone/384/000000/espresso-cup--v2.png",
    photos = ["https://cdn.pixabay.com/photo/2015/09/09/19/56/office-932926_1280.jpg"],
    address = "Charcos Enbarrados, 6 Ninguna Parte 04593",
    rating = 4,
    isClosed = true,
  } = store

  const ratingArray = Array.from(new Array(Math.floor(rating)))

  return (
    <StoreCard
      elevation={5}
    >
      <StoreCardCover
        key={name}
        resizeMethod='scale'
        source={{ uri: photos[0] }}
      />
      <Info>
        <Title> {name} </Title>
        <Section>
          <Rating
           style={styles.rating}
          >
            {ratingArray.map(() => (
              <SvgXml xml={star} width={30} height={30} />
            ))}
          </Rating>
          <SectionEnd>
            {isClosed && <SvgXml xml={closed} width={40} height={40} />}
            <Icon
              source={{ uri: icon }} />
          </SectionEnd>
        </Section>
        <Address> {address} </Address>
      </Info>
    </StoreCard>
  )
}

 const styles = StyleSheet.create({
  rating: {
    paddingLeft: 20
  }
})  

文件 StorePantalla.js

import React from 'react'
import { View, SafeAreaView } from 'react-native'
import { Searchbar } from 'react-native-paper'
import { StoreInfo } from '../componentStore/StoreInfo'
import styled  from 'styled-components/native'

const SafeArea = styled(SafeAreaView)`
  flex:1;
`
const BarSearch = styled(View)`
  padding: ${(props) => props.theme.space[3]}
`
const StoreList = styled(View)`
    flex: 1;
    background-color: #00BCD4;
    padding: 1${(props) => props.theme.space[2]}
`


export default function StorePantalla() {

  return (
    <SafeArea>
      <BarSearch>
        <Searchbar
          placeholder="Search"

        />
      </BarSearch>
      <StoreList>
        <StoreInfo/>
      </StoreList>
    </SafeArea>
  )
}

Answer 1

问题就在这里：

{ratingArray.map(() => (
          <SvgXml xml={star} width={30} height={30} />
        ))}

您必须添加一个关键属性，例如：

{ratingArray.map((_, i) => (
          <SvgXml key={i} xml={star} width={30} height={30} />
        ))}

有关更多信息，请查看文档：https://reactjs.org/docs/lists-and-keys.html#basic-list-component