如何在 React Native 中切换来自地图迭代的单个元素？

Question

我有一个切换功能来更改状态中的属性：

toggleSelected = () => {
    this.setState({selected:!this.state.selected})
  }

我还有一个 map 函数来迭代一些数据：

data.allRoomTypes.edges.map( c => 
<TouchableOpacity key={c.node.roomTypeId} onPress={this.toggleSelected}>  
   <Row style={styles.boxWithShadow}>
       <Col style={{marginLeft:160}}>
          <View style={{flex:1, flexDirection:"row"}}>
             {this.state.selected === false ? <Image style={styles.center} source={require("../../images/roomtypes/radio_btn_unselected.png")}/> : <Image style={styles.center} source={require("../../images/roomtypes/radio_btn_selected.png")}/>}
           </View>
        </Col>
   </Row>
</TouchableOpacity>
)

我想当我点击任何一行时，切换只会在该行上工作，其他行不会改变。 但问题是，当我单击任何一行时，所有行都会更改。 这个问题的解决方案是什么？

谢谢！

Answer 1

你的问题是您正在使用选择追踪地图中所有组件的状态相同的状态变量。

我会尝试这样的事情（我现在无法测试，但我想你会明白的）：

toggleSelected = (index) => {
    var selected = this.state.selected
    selected[index] = !selected[index]
    this.setState({selected:selected})
  }

data.allRoomTypes.edges.map( (c, index)  =>
<TouchableOpacity key={c.node.roomTypeId} onPress={(index) => this.toggleSelected(index)}>
   <Row style={styles.boxWithShadow}>
       <Col style={{marginLeft:160}}>
          <View style={{flex:1, flexDirection:"row"}}>
             {this.state.selected[index] === false ? <Image style={styles.center} source={require("../../images/roomtypes/radio_btn_unselected.png")}/> : <Image style={styles.center} source={require("../../images/roomtypes/radio_btn_selected.png")}/>}
           </View>
        </Col>
   </Row>
</TouchableOpacity>
)

选择状态的想法是一个对象 {} 本身，每个索引都有一个键，代表 TouchableOpacity 元素。

注意：以上代码假设您正在代码中的某处初始化所选对象。 喜欢selected = {1:False, 2:True...}