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

Question

为什么它向我显示此错误？

我有一个使用 npx react-native init myProyect 创建的应用程序，该应用程序是在我的 React Native 工作室中创建的。

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

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

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

到目前为止，您可以看到公司图像、星星和 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)

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

警告：列表中的每个子项都应该有一个唯一的“key”道具

警告：数组或迭代器中的每个子项都应该有一个唯一的“key”属性。检查`ListView`的渲染方法

React 警告：列表中的每个子项都应该有一个唯一的“key”道具。在 render() 函数中

如何修复警告：列表中的每个子项都应该有一个唯一的“key”道具

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

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

我应该如何根据我的结构化代码显示资产文件夹中的图标和图像？

我显示了与此相关的文件

文件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