Question

我有一些基于复选框的值true / false来自sqlite数据库。与sqlite下面的代码用我预期的更新，我仅在状态为checked = {this.state.KUSENINS1}时有问题，checked = {this.state.KUSENINS2}我得到了错误，道具类型失败：道具checked无效提供给string的{{1}}类型的CheckBox。并且即使我的数据库中的值是false，checkbock也会始终处于选中状态/ true，复选框会保持选中状态。任何帮助或链接都针对同一问题。thxu

boolean

此数据从sqlite连续获取

import Expo, { SQLite } from 'expo';
import React from 'react';
import { StyleSheet, Text, View, ScrollView, ActivityIndicator, SafeAreaView, AppRegistry } from 'react-native';
import { CheckBox } from 'react-native-elements';
import database from './database';

export default class AreaSpecify extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            numberOfRefresh: 0,
            //checked: null,
            data: null,
            NO: null,
            NOKAMAR: null,
            NP: null,
            LT: null,
            KUSENINS1: false,
            KUSENINS2: false,
            KUSENINS3: false,
            KUSENINS4: false,
            KUSENFIN1: false,
            KUSENFIN2: false,
            KUSENFIN3: false,
            KUSENFIN4: false,
            KUSENFIN5: false,
        };
    }

    componentDidMount(){
        const { navigation } = this.props;
        var NO = navigation.getParam('NO');

        //var datas = projectData;
        database.transaction(
            tx => {
                tx.executeSql('select * from List where NO = ?', [NO], (_, { rows: { _array } }) =>
                    {
                        //var data = rows._array;

                        this.setState({
                            isLoading: false,
                            data: _array,
                            NO: _array[0].NO,
                            NOKAMAR: _array[0].NOKAMAR,
                            NP: _array[0].NP,
                            LT: _array[0].LT,
                            KUSENINS1: _array[0].KUSENINS1,
                            KUSENINS2: _array[0].KUSENINS2,
                            KUSENINS3: _array[0].KUSENINS3,
                            KUSENINS4: _array[0].KUSENINS4,
                            KUSENFIN1: _array[0].KUSENFIN1,
                            KUSENFIN2: _array[0].KUSENFIN2,
                            KUSENFIN3: _array[0].KUSENFIN3,
                            KUSENFIN4: _array[0].KUSENFIN4,
                            KUSENFIN5: _array[0].KUSENFIN5,
                        });
                        console.log(this.state.data);
                        console.log(this.state.KUSENINS2);


                    }
                );
            },
            null
        );

    }



    render() {

        if (this.state.isLoading){

                return (
                    <SafeAreaView style={{flex: 1, flexDirection:'column'}}>
                        <View style={{flex: 1, flexDirection:'column'}}>
                            <ActivityIndicator size="small" color="#f7c744"/> 
                        </View>
                    </SafeAreaView>
                )

            }else{

                console.log(this.state.numberOfRefresh);

                    return (
                    <View style={{ flexDirection: 'column', flex: 1}}> 
                        <View style={styles.title}>
                            <Text style={styles.textTittle}>Project:{this.state.NP}</Text>
                            <Text style={styles.textTittle}>Area:{this.state.LT} | No.Kamar/Rumah:{this.state.NOKAMAR}</Text>
                        </View>
                        <ScrollView style={{ flex: 1, flexDirection: 'column'}}>
                        <View style={{height:30, padding: 7}}>
                            <Text style={styles.textTittle}>Instalasi Kusen</Text>
                        </View>
                        <View style={styles.row}>
                        <Text style={styles.text}>Selesai</Text>
                        <Text style={styles.text}>Control Job</Text>
                        </View>
                        <View style={styles.row}>
                            <CheckBox checked={this.state.KUSENINS1}
                            title='Konsistensi Leveling Kusen'
                            containerStyle={{backgroundColor: 'rgba(255,255,255,0.0)'}}
                            onPress={() => {

                                var NO = this.state.NO;
                                var check = !this.state.KUSENINS1;
                                database.transaction(
                                tx => {
                                    tx.executeSql("update List set KUSENINS1 = '"+ check +"' where NO = '"+ NO +"';");
                                    this.setState({KUSENINS1:!this.state.KUSENINS1})
                                    console.log(NO, !this.state.KUSENINS1);
                                },
                                null
                                );

                            }}/>
                        </View>
                        <View style={styles.row}>
                            <CheckBox checked={this.state.KUSENINS2}
                            title='Lot sudah tegak lurus'
                            containerStyle={{backgroundColor: 'rgba(255,255,255,0.0)'}}
                            onPress={() => {

                                var NO = this.state.NO;
                                var check = !this.state.KUSENINS2;
                                database.transaction(
                                tx => {
                                    tx.executeSql("update List set KUSENINS2 = '"+ check +"' where NO = '"+ NO +"';");
                                    this.setState({KUSENINS2:!this.state.KUSENINS2})
                                    console.log(NO, !this.state.KUSENINS2);
                                },
                                null
                                );

                            }}/>
                        </View>
                        </ScrollView>
                    </View>
                    );
        }

    }
}

Answer 1

我通过更改这部分代码来解决此问题，以使数据库值的状态为布尔值

componentDidMount(){
        const { navigation } = this.props;
        var NO = navigation.getParam('NO');
        //var datas = projectData;
        database.transaction(
            tx => {
                tx.executeSql('select * from List where NO = ?', [NO], (_, { rows: { _array } }) =>
                    {
                        //var data = rows._array;

                        this.setState({
                            isLoading: false,
                            data: _array,
                            NO: _array[0].NO,
                            NOKAMAR: _array[0].NOKAMAR,
                            NP: _array[0].NP,
                            LT: _array[0].LT,  
                            KUSENINS1: _array[0].KUSENINS1 == 'true' ? true : false,
                            KUSENINS2: _array[0].KUSENINS2 == 'true' ? true : false,
                            KUSENINS3: _array[0].KUSENINS3 == 'true' ? true : false,
                            KUSENINS4: _array[0].KUSENINS4 == 'true' ? true : false,
                            KUSENFIN1: _array[0].KUSENFIN1 == 'true' ? true : false,
                            KUSENFIN2: _array[0].KUSENFIN2 == 'true' ? true : false,
                            KUSENFIN3: _array[0].KUSENFIN3 == 'true' ? true : false,
                            KUSENFIN4: _array[0].KUSENFIN4 == 'true' ? true : false,
                            KUSENFIN5: _array[0].KUSENFIN5 == 'true' ? true : false,
                        });
                        console.log(this.state.data);
                        console.log(this.state.KUSENINS1, this.state.KUSENINS2);


                    }
                );
            },
            null
        );
    }

expo react native element复选框

1 个答案: