React native state map。如何只渲染1个值？

Question

我有这个屏幕上的巫婆显示了所有上传的广告：

。

[当我选择其中一则广告时，它应该向我显示包含该特定广告的所有图片和详细信息的新屏幕。

但是它向我显示了详细的广告，但显示了所有广告，而不是一个...

这是我如何显示数组值的代码：

{

                    this.state.ads && 
                    this.state.ads.map((ads) => {
                        var s = require('../styles')
                        var id = this.state.indexas
                        return(
                            <View key={id} style={s.adContainer}>
                                <TouchableHighlight>
                                    <View style={{justifyContent: "center", alignContent: "center"}}>

                                   <SafeAreaView>
                                        <Carousel
                                            sliderWidth={screenWidth}
                                            sliderHeight={screenWidth}
                                            itemWidth={screenWidth - 60}
                                            data={ads.images}
                                            renderItem={this._renderItem}
                                            hasParallaxImages={true}
                                        />
                                    </SafeAreaView> 
                                 </View>
                                 </TouchableHighlight>
                                 <TouchableHighlight>
                                    </TouchableHighlight>
                                        <View style={s.listedItemCell}>
                                    <Text>Textas:</Text> 
                                    <Text>{ads.text}</Text>
                                 </View>

                                 <View style={s.listedItemCell}>
                                    <Text>Paskelbta:</Text> 
                                    <Text>{ads.timestamp}</Text>
                                 </View>

                                 <View style={s.listedItemCell}>
                                    <Text>Kaina:</Text> 
                                    <Text>{ads.kaina}</Text>
                                 </View>
                            </View>
                        )
                    })
                }

我可以使用此代码访问所有内容。但是我只需要一个带有特定索引的值（this.state.indexas）

我收到错误消息，它说所有ID都是相同的（那是我想要的，特定ID），但仍然显示了数组中的所有数据...

Answer 1

key组件的View属性应该是唯一的。但是在您的情况下，您要将this.state.indexas分配为key，其中只包含选择索引。

由于您在JS中使用map，所以map的第二个参数包含该数组中特定元素的当前索引。

因此，如下更改代码，

{
  this.state.ads &&
    this.state.ads.map((ads, index) => {
      var s = require("../styles");
      return (
        <View key={index} style={s.adContainer}>
          ...
        </View>
      )
    })
}

这样，您将确保您的密钥没有重复。

希望这对您有帮助。随时提出疑问。