1
我在App.js中有一个父组件。React Native：Modal不出现
它有3个按钮。
第一个按钮是“添加日志”，它用于弹出一个模式。
我正在使用布尔值打开和关闭模式。
当单击“添加日志”按钮时，它会将布尔值变为true，从而显示模态。
我期望模式弹出打开，但是当我点击“添加日志”按钮时，我收到以下警告。
有人可以让我知道我在做什么错吗？
事件处理程序：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',
}
});
警告信息：
