renderRow에서 스위치 값이 업데이트되지 않습니다.

Question

내 스위치의 값을 나타내는 부울을 포함하는 내 상태의 키 값 배열이 있습니다.

스위치 구성 요소를 트리거하면 내 상태에서 값이 올바르게 변경되지만 스위치 값은 동일하게 유지됩니다. 구성 요소가 업데이트되지 않은 것과 같습니다. 나는 다른 프로젝트에서 똑같은 일을했고 거기에서 일하고있다.

_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);