列表项中的 React-Native 开关始终未选中答案

【问题标题】：React-Native Switch in ListItem is alwaays unchecked列表项中的 React-Native 开关始终未选中
【发布时间】：2019-04-18 22:34:25
【问题描述】：

我有一个要在 FlatList 中显示的对象列表。列表项还应该有一个选择或取消选择条目的开关。但是每次我点击开关时，状态都不会被选中。我不知道这是 ListItem 组件的错误还是我的代码中的错误。 onValueChange 事件被正确触发，但似乎在更改状态或数据集未更新后 FlatList 未重新呈现...

这是我的课程：

class Person {
  constructor() {
    this._name = '';
    this._selected = false;
  }

  getName() {
    return this._name;
  }

  setName(value) {
    this._name = value;
  }

  isSelected() {
    return this._selected;
  }

  setSelected(value) {
    this._selected = value;
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    let p1 = new Person();
    p1.setName('Superman');
    let p2 = new Person();
    p2.setName('Batman');
    let list = [ p1, p2 ];
    this.state = { persons: list };
  }

  renderItem = ({item, index}) => (
    <ListItem
      title={item.getName()}
      switch={{
        value: item.isSelected(),
        onValueChange: (value) => {
          let list = this.state.persons;
          list[index].setSelected(value);
          this.setState({ persons: list });
        },
      }}
    />
  );

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.persons}
          renderItem={this.renderItem}
        />
      </View>
    );
  }
}

【问题讨论】：

尝试不同的变量名。对于要更新的数据，它必须是刷新的。创建一个令人耳目一新的结构。 <FlatList style={styles.listContainer} onRefresh={this.refreshData} renderItem={this.renderItem} refreshing={this.state.refreshing} data={this.state.data} />

标签： javascript react-native react-native-elements

【解决方案1】：

您的代码运行良好，只是缺少 FlatList 组件的 extraData 属性。

查看documentation：

通过将extraData={this.state} 传递给 FlatList，我们可以确保 FlatList 当state.selected 更改时，它本身将重新渲染。无需设置这个道具，FlatList 不会知道它需要重新渲染任何项目因为它也是一个 PureComponent 并且 prop 比较不会显示任何更改。

在你的情况下，它必须是：

<FlatList
     data={this.state.persons}
     renderItem={this.renderItem}
     extraData={this.state}
/>

这是一个有效的demo。

【讨论】：