反应本机状态图。如何只呈现 1 个值？

Question

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

。

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

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

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

{

                    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>
                        )
                    })
                }

我可以使用此代码访问所有内容。但我只需要 1 个具有特定索引的值 (this.state.indexas)

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

Answer 1

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

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

所以请按如下方式更改您的代码，

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

这样，您就可以确保您的密钥没有重复。

编辑

因为您想根据 selected 值显示特定项目。你可以在 JS 中使用 filter 或 find。

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

希望这对您有所帮助。有疑问欢迎留言。

Answer 2

我已经想通了。我发送了广告值而不是索引并将数组值分配给新状态，然后我摆脱了地图并仅显示新状态。

反应本机状态图。如何只呈现 1 个值？

React native state map. how to get only 1 value rendered?

arrays

maps

modal-dialog

react-native