如何在 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...}