Reactjs React Native：网格中显示的图像列表的唯一键

在我的React Native 0.63.2应用程序中，图像以网格显示，网格是一行2或3个网格。使用DisplayImg渲染单个图像，并使用image_array.map迭代每个图像并使用DisplayImg渲染。以下是图像大小小于等于4的地图代码：

import { Col, Row, Grid } from 'react-native-easy-grid';
....
return (
                <Grid style={{position:"absolute", paddingTop:0,paddingLeft:0}}>
                    {pics.map((item, index) => {
                        if (index%2===0) {  //<<==for even # of images, full rows of 2 grids
                            if (pics[index+1]) {
                                return (
                                    <Row style={styles.row}>
                                        <View key={pics[index]}>  //<<==View here is to wrap each `DisplayImg` with unique `key`
                                        <DisplayImg 
                                            img_source={picPath(pics[index].fileName)}
                                            width={screen_width*half}
                                            ht={screen_width*half}
                                            index= {index}
                                            modalWidth={screen_width}
                                            modalHt= {pics[index].height*(screen_width/pics[index].width)}
                                            dataLen={len}
                                            sortFn={move}
                                            handleSwipe={swipeImage} 
                                        />
                                        </View>  
                                        <View key={pics[index+1].fileName}>
                                        <DisplayImg 
                                            img_source={picPath(pics[index+1])}
                                            width={screen_width*half}
                                            ht={screen_width*half}
                                            index= {index+1}
                                            modalWidth={screen_width}
                                            modalHt= {pics[index+1].height*(screen_width/pics[index+1].width)}
                                            dataLen={len}
                                            sortFn={move}
                                            handleSwipe={swipeImage}                                           
                                        />           
                                        </View>                  
                                    </Row>    
                                )} else {  //<<==last row with one image only
                                return (
                                    <Row style={styles.row}>
                                        <View key={pics[index].fileName}>
                                        <DisplayImg 
                                            img_source={picPath(pics[index])}
                                            width={screen_width*half}
                                            ht={screen_width*half}
                                            index= {index}
                                            modalWidth={screen_width}
                                            modalHt= {pics[index].height*(screen_width/pics[index].width)}
                                            dataLen={len}
                                            sortFn={move}
                                            handleSwipe={swipeImage}                                          
                                        />
                                        </View>
                                    </Row>    
                                )};                                           
                        }
                    })}                        
                </Grid>
            );

---

我遵循这里唯一的钥匙。每个DisplayImg的键有什么问题？

您需要为映射回调返回的根组件指定键。你的情况应该是这样的。请注意，您应该在两个返回语句中都添加键。

这是错误消息。但是每行有2个图像网格，并且每个单独的图像仍然不是唯一的关键帧。删除最后一个图像时，行键可以相同，但行的内容已更改。行中的键将无法唯一标识行，这将破坏键的用途

[Tue Aug 25 2020 15:44:16.593]  ERROR    Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <GridNB>. See h-t-t-p-s:/-/fb.me/react-warning-keys for more information.
    in RowNB (at DisplayImages.js:255)  //<<==RowNB is method provide by Row from react-native-easy-grid
    in Unknown (at Itie.js:200)  //<<==Itie is a function component of the app itself
    in RCTView (at View.js:34)
    in View (at MyAccordion.js:57)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at MyAccordion.js:56)
    in MyAccordion (at Itie.js:199)
    in RCTView (at View.js:34)
    in View (at ScrollView.js:1124)
    in RCTScrollView (at ScrollView.js:1260)
    in ScrollView (at ScrollView.js:1286)
    in ScrollView (at KeyboardAwareHOC.js:487)
    in KeyboardAwareScrollView (at Content.js:37)
    in RCTView (at View.js:34)
    in View (at SafeAreaView.js:41)
    in ForwardRef(SafeAreaView) (at Content.js:36)
    in Content (at connectStyle.js:392)
    in Styled(Content) (at Itie.js:182)
    .....