開關值未在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);