React Native中如何为FlatList列表项设置独立的CheckBox状态？

我明白你的问题啦——现在你用了一个全局的showContinueToPayment状态来控制所有FlatList项里的CheckBox，所以不管点哪个，所有CheckBox的状态都会同步变化。要让每个房间项拥有独立的选中状态，咱们可以通过以下步骤修改：

1. 重构状态存储方式 #

把原来单一的布尔值状态，改成一个对象（或数组）来存储每个房间的选中状态。假设你的房间数据里有唯一标识（比如id），初始化状态时可以这样写：

state = {
  // 用对象存储每个房间的选中状态，键为房间唯一标识，值为布尔值
  selectedRooms: {}
};

2. 修改renderRooms函数中的CheckBox逻辑 #

让每个CheckBox的状态绑定到当前房间对应的selectedRooms值，点击时只更新该房间的状态：

renderRooms = ({ item: room }) => {
  // 获取当前房间的选中状态，默认未选中
  const isSelected = this.state.selectedRooms[room.id] || false;
  
  return(
    <View style={styles.cards}>
      <View style={styles.cardRight}>
        <View style={{ marginLeft:2, alignItems: 'center', flex:1 }}>
          {/* 原有价格文本保持不变 */}
          <Text style={{fontSize:12, marginTop:10, marginBottom: 5, color:'#B0B0B0'}}> Harga/malam </Text>
          <Text style={{fontSize:12, textDecorationLine:'line-through'}}> {`${'Rp.'}${room.pricing.normal}`} </Text>
          <Text style={{fontSize:14, fontWeight:'800', color:'#26de81', }}> {`${'Rp.'}${room.pricing.discount}`} </Text>
          
          <CheckBox 
            iconRight 
            title={isSelected ? 'Batal' : 'Pilih'} 
            checked={isSelected} 
            containerStyle={{padding:5, borderColor:'white', backgroundColor:'white'}} 
            onPress={() => {
              // 更新状态时，只修改当前房间对应的键值
              this.setState(prevState => ({
                selectedRooms: {
                  ...prevState.selectedRooms,
                  [room.id]: !isSelected
                }
              }));
            }} 
          />
        </View>
      </View>
    </View>
  )
}

关键说明 #

• 这里用房间的唯一标识（room.id）作为selectedRooms对象的键，确保每个房间的状态独立存储，互不干扰。
• 如果你的房间数据没有id，可以用其他唯一属性（比如房间号）来替代；尽量避免用FlatList的索引，因为项的顺序可能会变化导致状态混乱。
• 若需要默认选中某些房间，只需在初始化selectedRooms时，给对应房间的键设置true即可。

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