错误警告：列表中的每个 child 都应该有一个唯一的 "key" 道具

Question

为什么显示这个错误？

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

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

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

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

到目前为止你可以看到公司形象、星星和关闭图像，它也是 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)

我在本站的其他类似答案中寻找解决方案，但我没有设法解决：

更正错误并显示图标。

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

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

我展示一下这个涉及的文件

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

错误警告：列表中的每个 child 都应该有一个唯一的 "key" 道具

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

javascript

image

key

reactjs

react-native