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

Question

在我的React Native0.63.2 应用程序中，图像显示在网格中，即连续 2 或 3 个网格。单个图像被渲染DisplayImg并image_array.map()用于迭代每个图像并使用DisplayImg. 这是map代码（对于 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>
            );

但是该应用程序会发出有关丢失独特key道具的警告。这是警告消息：

[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)
    .....

我在这里关注React 文档的唯一键。这里的keyfor each有什么问题DisplayImg？

标签： reactjsreact-native

Answer 1

您需要为地图回调返回的根组件指定键。在您的情况下，它应该是这样的<Row style={styles.row} key={index}>。请注意，您应该key在两个退货声明中添加。