開關值不在renderRow中更新

Question

我有一個鍵值數組在我的狀態包含布爾值指示我的開關值。

當我觸發Switch組件時，在我的狀態下正確更改該值，但我的Switch的值保持不變。這就像組件沒有更新。我在另一個項目中做了完全相同的事情，並且在那裏工作。

_changeValue(k) { 
    switchesValues[k] = !switchesValues[k] 
    this.setState({ 
     switches: switchesValues 
    }) 
} 

_renderEventRow(allergiesList) { 
    var k = allergiesList.key 

    return (
     <View style={{flexDirection: 'row', height: 50, alignItems: 'center', paddingLeft: 10, borderBottomWidth: 0.5, borderColor: 'lightgray'}}> 
     <Text style={{flex: 1, color: '#5f5f5f'}}>{allergiesList.name}</Text> 
     <Switch style={{marginRight: 10}} value={this.state.switches[k]} onValueChange={() => this._changeValue(k)}/> 
     </View> 
    ) 
} 

我的列表視圖：

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2}) 

constructor(props) { 
super(props) 
    this.state = { 
     ds:[], 
     dataSource:ds, 
     switches: [] 
    } 
} 

componentDidMount() { 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(this.state.ds), 
    }) 
    this.findAllergies() 
} 

render() { 
    return(
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={(rowData) => { return this._renderEventRow(rowData)}} 
     />)} 
    ) 
} 

findAllergies() { 
    var that = this 
    firebase.database().ref("allergies").on("value", (snap) => { 
    var items = []; 

    snap.forEach((child) => { 
     items.push({ 
     name: child.val(), 
     key: child.key, 
     }) 
    }) 

    that.setState({ 
     dataSource: that.state.dataSource.cloneWithRows(items), 
    }); 
    }) 
} 

Answer 1

您好我創建了一個示例應用程序來實現您的要求。看看下面的代碼。

import React, {Component} from 'react'; 
import { 
    AppRegistry, 
    Text, 
    View, 
    TouchableOpacity, 
    Switch, 
    ListView, 
} from 'react-native'; 

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2}); 

export default class AwesomeProject extends Component { 

    constructor(props) { 
     super(props) 
     this.state = { 
      ds: [], 
      dataSource: ds, 
      switches: [] 
     } 
    } 

    componentDidMount() { 
     let allergies = []; 
     this.switchesValues = []; 
     for (let i = 0; i <= 5; i++) { 
      allergies.push({ 
       key: i, 
       name: 'Name ' + i, 
      }); 
      this.switchesValues[i] = false; 
     } 
     this.setState({ 
      dataSource: this.state.dataSource.cloneWithRows(allergies), 
      switches: this.switchesValues, 
     }) 
    } 

    render() { 
     return (
      <ListView 
       dataSource={this.state.dataSource} 
       renderRow={(rowData) => { return this._renderEventRow(rowData)}} 
      />); 
    } 

    _changeValue(k) { 
     console.log('Status '+JSON.stringify(this.switchesValues)) 
     this.switchesValues[k] = !this.switchesValues[k]; 
     this.setState({ 
      switches: this.switchesValues, 
     }) 
    } 

    _renderEventRow(allergiesList) { 
     var k = allergiesList.key 

     return (
      <View 
       style={{flexDirection: 'row', height: 50, alignItems: 'center', paddingLeft: 10, borderBottomWidth: 0.5, borderColor: 'lightgray'}}> 
       <Text style={{flex: 1, color: '#5f5f5f'}}>{allergiesList.name}</Text> 
       <Switch style={{marginRight: 10}} value={this.state.switches[k]} 
         onValueChange={() => this._changeValue(k)}/> 
      </View> 
     ) 
    } 
} 

AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);