交换机的React-Native ListView不更新

Question

• 情况：我有一个Switch的ListView
• 问题：按下开关时开关不会改变其状态，调试每个开关都处于检查状态，但是在setValue结束后，开关又回到未检查状态。 开关永远不会呈现为选中状态

这是我的代码：

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Switch,
  ListView
} from 'react-native';

export default class FriendListBody extends Component {
  constructor(props) {
    super(props);

    let friends = this.props.friends.map((friend) => {
      return {
        ...friend,
        selected: false
      }
    });

    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      datasource: ds.cloneWithRows(friends),
      friends
    };

    this._renderRow= this._renderRow.bind(this);
    this._setValue = this._setValue.bind(this);
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.datasource}
          renderRow={this._renderRow}
          style={styles.listView}
          enableEmptySections={true}
        />
      </View>
    );
  }

  _setValue(id, value) {
    let newList = this.state.friends.slice();
    let pos = -1;

    for (let i = 0; i < this.state.friends.length; i++) {
      if (id === this.state.friends[i]._id) {
        pos = i;
        break;
      }
    }

    newList[pos].selected = value;
    this.setState({ 
      friends: newList, 
      datasource: this.state.datasource.cloneWithRows(newList) }
    );
  }

  _renderRow(rowData) {
    return (
      <View key={rowData._id} style={{ borderRadius: 10 }}>
        <Switch
          onValueChange={(value) => this._setValue(rowData._id, value)}
          style={{ marginBottom: 10 }}
          value={ rowData.selected } />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#d9d9d9',
  },
  listView: {
    flex: 1,
    borderColor: 'grey'
  }
});

引起我注意的是，第一次加载list时， _renderRow方法仅被调用一次。

感谢您的帮助。

Answer 1

如果要更新listView，请创建新对象，而不是更新现有对象的属性。

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Switch,
  ListView
} from 'react-native';

export default class FriendListBody extends Component {
   ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2       });

  constructor(props) {
    super(props);

    let friends = this.props.friends.map((friend) => {
      return {
        ...friend,
        selected: false
      }
    });

    this.state = {
      datasource: this.ds.cloneWithRows(friends),
      friends
    };

    this._renderRow= this._renderRow.bind(this);
    this._setValue = this._setValue.bind(this);
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.datasource}
          renderRow={this._renderRow}
          style={styles.listView}
          enableEmptySections={true}
        />
      </View>
    );
  }

  _setValue(id, value) {
    let newList = this.state.friends.slice();
    let pos = -1;

    for (let i = 0; i < this.state.friends.length; i++) {
      if (id === this.state.friends[i]._id) {
        pos = i;
        break;
      }
    }

    newList[pos].selected = value;
    const datasource = this.ds.cloneWithRows(newList);

    this.setState({ 
      friends: newList, 
      datasource: datasource
    );
  }

  _renderRow(rowData) {
    return (
      <View key={rowData._id} style={{ borderRadius: 10 }}>
        <Switch
          onValueChange={(value) => this._setValue(rowData._id, value)}
          style={{ marginBottom: 10 }}
          value={ rowData.selected } />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#d9d9d9',
  },
  listView: {
    flex: 1,
    borderColor: 'grey'
  }
});