Question

我在App.js中有一个父组件。

它有3个按钮。

第一个按钮是＆＃34;添加日志＆＃34;它用于弹出模态。

我使用布尔值打开和关闭模态。

当＆＃34;添加日志＆＃34;单击按钮，它将布尔值变为true，从而显示模态。

我预计模式会弹出，但是当我点击＆＃34;添加日志时，我会收到以下警告。按钮。

有人能让我知道我在这里做错了吗？

事件处理程序：addlog_clicked()

布尔变量用于控制模态可见性：addlog_showmodal

App.js

 import React, { Component } from "react";
import {
StyleSheet,
View,
ScrollView,
TouchableHighlight,
Text,
Modal,
DatePickerIOS,
TextInput
} from "react-native";
import {
dropLogsTable,
createLogsTable,
getProfileHeightStandardfromDB,
saveLogsRecord,
populateDummyLogs,
getLogsRecords,
getLogsRecordsFromDB,
neverendingmethod,
getLogsDetailsforSaveDelete,
deleteSelectedRecordDB
} from "../src/helper";

//import { Button } from 'react-native-elements';
import { Spinner } from "../src/Spinner";
import Logitem from "../src/Logitem";
import AddLog from "../src/AddLog";

export default class App extends Component {
state = {
    allLogs: {
        rows: {
            _array: [{ logstringdate: "" }]
        }
    },
    profileobject: { profileheight: 100, profilestandard: "XYZ" },
    showspinner: true,
    count: 0,
    deletedate: "",
    savedate: "",
    saveweight: "",
    addlog_selectedweight: 80.0,
    addlog_showmodal: false,
    addlog_selecteddate: new Date()
};

componentDidMount() {
    this.fetchProfileData();
    this.getAllLogs();
}

addlog_clicked() {
    this.setState({ addlog_showmodal: true });
    console.log("Add Log Clicked1");
}

addlog_onDateChange(date) {
    this.setState({
        addlog_selecteddate: date
    });
}

addlog_saveSelectedRecord() {
    this.setState({ addlog_showmodal: false });
    console.log(
        "Weight ==> " +
            this.state.addlog_selectedweight +
            " Date ==> " +
            this.state.addlog_selecteddate
    );
}

renderSpinner() {
    if (this.state.showspinner) {
        return <Spinner size="small" />;
    }
    if (this.state.addlog_showmodal) {
        return (
            <View style={styles.containerStyle}>
                <Modal
                    animationType="slide"
                    transparent={false}
                    visible={this.state.addlog_showmodal}
                    onRequestClose={() => {
                        alert("Modal has been closed.");
                    }}
                >
                    <View style={{ marginTop: 22 }}>
                        <DatePickerIOS
                            date={this.state.addlog_selecteddate}
                            mode="date"
                            onDateChange={date =>
                                this.addlog_onDateChange(date)
                            }
                            style={{ height: 100, width: 300 }}
                        />
                    </View>
                    <View
                        style={{
                            marginTop: 22,
                            borderColor: "#ddd",
                            borderWidth: 5
                        }}
                    >
                        <TextInput
                            returnKeyType="done"
                            keyboardType="numeric"
                            style={{
                                height: 40,
                                width: 60,
                                borderColor: "gray",
                                borderWidth: 1
                            }}
                            onChangeText={text =>
                                this.setState({
                                    addlog_selectedweight: text
                                })
                            }
                            value={this.state.addlog_selectedweight.toString()}
                        />
                        <Text>KG</Text>
                        <TouchableHighlight
                            style={styles.buttonstyle}
                            onPress={this.addlog_saveSelectedRecord()}
                        >
                            <Text style={styles.buttontextstyle}>Save</Text>
                        </TouchableHighlight>
                    </View>
                </Modal>
            </View>
        );
    } else if (!this.state.addlog_showmodal) {
        //return this.state.allLogs.rows._array.map(ae => <Text>{ae.bmi}</Text>);
        return this.state.allLogs.rows._array.map(ae => (
            <View key={ae.logdate}>
                <Logitem
                    logstringdate={ae.logstringdate}
                    bmi={ae.bmi}
                    weight={ae.metricweight}
                    logdate={ae.logdate}
                    invokedelete={str => {
                        //this.setState({ deletedate: str });
                        this.deleteSelectedRecord(str);
                    }}
                    invokesave={(date, num) => {
                        console.log(
                            "Save Date ==>" +
                                date +
                                " Save Weight ==>" +
                                num
                        );
                        this.saveSelectedRecord(date, num);
                        //this.saveSelectedRecord(str, num)
                    }}
                />
            </View>
        ));
    }
}

async fetchProfileData() {
    console.log("Before Profile Fetch");
    const result = await getProfileHeightStandardfromDB();
    console.log("After Profile Fetch");
    console.log("Height : " + result.profileheight);
    console.log("Standard: " + result.profilestandard);
    this.setState({ profileobject: result }); //Line Y
    return result; //Line X
}

async getAllLogs() {
    console.log("Before All Logs Fetch");
    const allLogs = await getLogsRecordsFromDB();
    console.log("After All Logs Fetch");
    //console.log('Spinner State ==>'+this.state.showspinner);
    if (allLogs != null) {
        this.setState({ allLogs, showspinner: false });
        //console.log('After async spinner state ==>'+this.state.showspinner);
        //console.log(allLogs);
    }
    return allLogs;
}

async deleteSelectedRecord(str) {
    console.log("Delete clicked");
    //console.log('this.state.deletedate ==> '+this.state.deletedate);
    //console.log('this.state.selecteddate ==>' + this.state.selecteddate); //LINE X
    console.log("Str ==>" + str);
    const result = await deleteSelectedRecordDB(
        Math.trunc(str.getTime() / 86400000)
    );
    console.log("deleteSelectedRecord after");
    console.log("result ==> " + result);
    if (result) {
        console.log("Delete was done successfully");
        this.getAllLogs();
    } else {
        console.log("Delete Result was not true");
    }
    //return result;
}

async saveSelectedRecord(date, num) {
    console.log("Save clicked");
    console.log("Save Date ==> " + date + " Save Weight ==> " + num);
    console.log("Save Date1 ==> " + date.getTime());
    console.log("Save Date2 ==> " + date.getTime() / 86400000);

    //console.log('this.state.savedate ==> '+this.state.savedate);
    //console.log('this.state.selecteddate ==>' + this.state.selecteddate); //LINE X
    const result = await saveLogsRecord(
        "Metric",
        num,
        Math.trunc(date.getTime() / 86400000)
    );
    console.log("saveSelectedRecord after");
    console.log("result ==> " + result);
    if (result) {
        console.log("Save was done successfully");
        this.getAllLogs();
    } else {
        console.log("Save Result was not true");
    }
    //return result;
}

render() {
    return (
        <ScrollView style={styles.container}>
            <TouchableHighlight
                style={styles.buttonstyle}
                onPress={() => {
                    this.addlog_clicked();
                }}
            >
                <Text style={styles.buttontextstyle}>Add Log</Text>
            </TouchableHighlight>

            <TouchableHighlight
                style={styles.buttonstyle}
                onPress={() => console.log("Add Log clicked")}
            >
                <Text style={styles.buttontextstyle}>Profile</Text>
            </TouchableHighlight>

            <TouchableHighlight
                style={styles.buttonstyle}
                onPress={() => console.log("Add Log clicked")}
            >
                <Text style={styles.buttontextstyle}>Settings</Text>
            </TouchableHighlight>

            {this.renderSpinner()}
        </ScrollView>
    );
}
}

const styles = StyleSheet.create({
container: {
    flex: 1
},

buttonstyle: {
    marginRight: 40,
    marginLeft: 40,
    marginTop: 10,
    paddingTop: 20,
    paddingBottom: 20,
    backgroundColor: "#68a0cf",
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#fff"
},
buttontextstyle: {
    color: "#fff",
    textAlign: "center"
}
});

警告讯息：

React Native：模态不会出现

0 个答案: