React Native Elements Checkbox 一直选择所有项目，而不是选中的一项

Question

希望一切都好，希望每个人都有一个美好而安全的周末。我需要一点帮助。我已经坚持了一周了。我有一个反应原生项目，我在其中使用一个带有反应原生元素复选框的平面列表。我有显示从我的数据库中获取的数据的平面列表。所以一切正常。但是当我检查正在显示的项目之一时，它会检查所有项目。我已经用谷歌搜索并尝试了几种不同的方法，我也从这里得到了这些方法。在复选框中没有选中任何内容或全部选中。你们可以看看我下面的代码，如果我遗漏了什么，请告诉我？

非常感谢！！！

import React from 'react';
import {
    View,
    Text,
    FlatList,
    StyleSheet, 
} from 'react-native';

import {
    ListItem,
    CheckBox,
} from 'react-native-elements';
import BackButtonMGMT from '../Components/BackButtonMGMT';

export default class ViewCategory extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            checked: false,
        }
    }

    render() {

        const  { navigation } = this.props;
        const cust = navigation.getParam('food', 'No-User');
        const other_param = navigation.getParam('otherParam', 'No-User');
        const cust1 = JSON.parse(cust);
    
        const data = cust1;
        console.log(data);

        return (
            <View style={styles.container}>
                <BackButtonMGMT navigation={this.props.navigation} />

                <FlatList
                    data={data}
                    extraData={this.state}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={({ item, index }) => (
                        <CheckBox
                        center 
                        titleProps={{ color: 'black', fontWeight: 'bold'}}
                        title={item}
                        iconRight
                        checked={this.state.checked}
                        size={30}
                        onPress={() => this.setState({checked: !this.state.checked})}
                        containerStyle={styles.checkBox}
                        //bottomDivider
                        //chevron
                        />
                        
                    )}
                />

            </View>
        )
    }

    onCheck = (item) => {
        this.setState((state) => ({
            checked: !state.checked,
        }));
    }
}

Answer 1

您当前将列表中的复选框设置为checked={this.state.checked}

您似乎没有使用 onCheck 方法，而是在 onPress 中处理事件。因此，当您的 onPress 事件处理程序触发时，它会切换整个列表，因为列表中的每个项目都使用相同的状态。

相反，您需要跟踪数组处于选中状态的所有项目。您将需要执行以下操作：

this.state = {
  items: [],
  ... // other state
}

...
renderItem={({ item }) => (
  <CheckBox
    checked={!!item.checked} // <-- individual item checked state here
    onPress={() => {
      const items = [...this.state.items] // <-- shallow copy to show we're not mutating state
      const currentItemIndex = items.findIndex(v => v.name === item.name) // <-- lookup by something unique on the item like an ID. It's better to lookup rather than assume the array indexes are ordered the same.
      items[currentItemIndex].checked = !items[currentItemIndex].checked
      this.setState(state => ({ ...state, items }))
    }}
    ... // other props
  />
)}

Answer 2

这就是我解决它的方法，但现在我无法一次选择多个项目。

export default class ViewCategory extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            checked: null,
        }
    }

    render() {

        const  { navigation } = this.props;
        const cust = navigation.getParam('food', 'No-User');
        const other_param = navigation.getParam('otherParam', 'No-User');
        const cust1 = JSON.parse(cust);
    
        const data = cust1;
        console.log(data);

        return (
            <View style={styles.container}>
                <BackButtonMGMT navigation={this.props.navigation} />

                <FlatList
                    data={data}
                    extraData={this.state}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={({ item, index }) => (
                        <CheckBox
                        center 
                        titleProps={{ color: 'black', fontWeight: 'bold'}}
                        title={item}
                        iconRight
                        checked={this.state.checked === item}
                        size={30}
                        onPress={() => this.setState({checked: item})}
                        containerStyle={styles.checkBox}
                        />
                        
                    )}
                />

            </View>
        )
    }