React Native数组映射动态渲染异常问题求助

看起来你遇到的核心问题是每个Plan板块都渲染了全部的服务列表，而非各自对应的那一组服务。这是因为你在FlatList的每个item组件里，遍历了整个serviceDetails数组，导致每个板块都重复渲染了所有的SelectableChips组件，最终所有内容聚合在了一起。

解决方案思路 #

你的planName和serviceDetails是索引一一对应的关系：第一个plan对应serviceDetails[0]的服务列表，第二个plan对应serviceDetails[1]，以此类推。所以我们只需要在FlatList渲染每个item时，拿到当前item的索引，用这个索引去取serviceDetails里对应位置的服务数组即可。

修改后的关键代码 #

首先修改FlatList的renderItem方法，获取当前item的index参数，然后替换掉原来遍历整个serviceDetails的逻辑：

renderItem={({ item, index }) => (
  // 保留原有的板块头部、复选框等代码...
  <View style={styles.cellSubViewTwo}>
    <Text style = {styles.textHeaderStyle}>This plan includes:</Text>
    <View backgroundColor = {"transparent"} flexDirection='column' marginTop={5}>
      {/* 不再遍历整个serviceDetails，直接取当前索引对应的服务数组 */}
      <SelectableChips
        selectedChipStyle={selectableStyles}
        initialChips={this.state.serviceDetails[index]} // 核心修改：用index匹配对应服务
        onChangeChips={(chips) => console.log(chips)}
        alertRequired={false}
        backgroundColor={"transparent"}
        subView={
          <TouchableOpacity style = {{ backgroundColor: 'transparent' }} onPress = {this.props.seeMore} >
            <View backgroundColor={'transparent'} flexDirection = {'row'} alignItems= {'center'} marginLeft={5}>
              <Text style={styles.seeMoreStyle}>See more</Text>
              <Image source={require('../../../assets/img/iOS/chevron_right.png')} style={styles.rightArrowSeeMoreImageStyle}/>
            </View>
          </TouchableOpacity>
        }/>
    </View>
  </View>
  // 保留原有的Service组件等代码...
)}

额外优化建议 #

1. 可以移除构造函数里的alert调试语句，避免影响正式环境的用户体验。
2. 你的Selected_Items_Array类中，selectedItemsArray没有绑定this，会变成全局变量，建议修改为this.selectedItemsArray = []，避免变量污染问题。

内容的提问来源于stack exchange，提问作者pranami