Javascript 复选框在使用Flatlist呈现的ListItem中不起作用

我正在使用带有复选框的ListItems。列表中的每个项目都包含该复选框。我无法选中或取消选中复选框，也无法选中列表项中的所有复选框。我使用“checkBoxTest（）”和“selectAll（）”创建了这两个函数。我认为我没有正确使用setState。这是我的密码

import React, { Component } from 'react';
import { FlatList, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import { ListItem, checkBox } from 'react-native-elements';

const list = [
  {
    name: 'PinkMan',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
    subtitle: 'Vice President'
  },
  {
    name: 'Mr White',
    avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
    subtitle: 'Vice Chairman'
  },
]


export default class Members extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,

    }
  }
  selectAll(){
    this.setState({checked: !this.state.checked})
  }

  checkBoxTest() { 
    this.setState({checked: !this.state.checked})
  } 

  keyExtractor = (item, index) => index.toString()
  renderItem = ({ item }) => (
    <ListItem
      title={item.name}
      subtitle={item.subtitle}
      leftAvatar={{
        source: item.avatar_url && { uri: item.avatar_url },
        title: item.name[0]
      }}
      checkBox={{
        checkedColor: '#744DD2',
        uncheckedColor: 'grey',
        onPress: this.checkBoxTest,
        checked: this.state.checked,
      }}
      bottomDivider
    />
  )

  render() {
    return(
      <>
        <View style={{ bottom: 60 }}>
          <FlatList
            keyExtractor={this.keyExtractor}
            data={list}
            renderItem={this.renderItem}
          />
        </View>
        <View>
          <TouchableOpacity onPress={this.selectAll} >
            <Text style={styles.textStyle}>Select All</Text>
          </TouchableOpacity>
        </View>
      </> 
    );
  }
}

import React，{Component}来自'React'；
从“react native”导入{FlatList、样式表、文本、视图、图像、TouchableOpacity}；
从“react native elements”导入{ListItem，checkBox}；
常数列表=[
{
姓名：“平克曼”，
头像url:'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
副标题:"副总统"
},
{
姓名：'怀特先生'，
头像url:'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
副标题:"副主席"
},
]
导出默认类成员扩展组件{
建造师（道具）{
超级（道具）；
此.state={
勾选：假，
}
}
selectAll（）{
this.setState（{checked:！this.state.checked}）
}
checkBoxTest（）{
this.setState（{checked:！this.state.checked}）
} 
keyExtractor=（项，索引）=>index.toString（）
renderItem=（{item}）=>(
)
render（）{
返回(
全选
);
}
}

尝试将

extraData={this.state}

传递到FlatList组件

编辑：

---

您可能只想传递

extraData={this.state.checked}

。您的

平面列表

只应在选中状态更改时重新呈现。根据需要传递其他道具。

尝试将

extraData={this.state}

传递到FlatList组件

编辑：

---

您可能只想传递

extraData={this.state.checked}

。您的

平面列表

只应在选中状态更改时重新呈现。根据需要传递其他道具。

似乎您忘记绑定此道具。selectAll（）和checkBoxTest（）

如果要将函数传递给

onPress（）

，首先需要在构造函数中绑定它

this.selectAll = this.selectAll.bind(this); 
this.checkBoxTest = this.checkBoxTest.bind(this);

---

将这两条语句放在构造函数中。

似乎您忘记了绑定它。selectAll（）和checkBoxTest（）

this.selectAll = this.selectAll.bind(this); 
this.checkBoxTest = this.checkBoxTest.bind(this);

如果要将函数传递给

onPress（）

，首先需要在构造函数中绑定它

this.selectAll = this.selectAll.bind(this); 
this.checkBoxTest = this.checkBoxTest.bind(this);

---

将这两条语句放在构造函数中。

似乎您忘记绑定

this.selectAll（）

和

checkBoxTest（）

您可以详细说明如何修复此问题吗？似乎您忘记绑定

this.selectAll（）

和

checkBoxTest（）

你能详细说明我如何解决这个问题吗？你能帮我解决这个问题吗？你好@AbdulWahab，不确定你在问什么-传递

extraData

有效吗？TLDR：传递任何状态，对于哪个FlatList的项应该重新呈现为

extraData

FlatList

作为一个

PureComponent

实现，这意味着如果传递给FlatList的道具保持相等，它将不会重新渲染。你能帮我怎么解决吗？Hello@AbdulWahab，不确定您在问什么-传递

extraData

是否有效？TLDR：传递平面列表项应重新呈现为

extraData

的任何状态

FlatList

作为一个

PureComponent

实现，这意味着如果传递给FlatList的道具保持相等，它将不会重新渲染。

this.selectAll = this.selectAll.bind(this); 
this.checkBoxTest = this.checkBoxTest.bind(this);