变量在Formik中使用react-native-dialog和date-fns时没有初始化

Question

我有一个使用formik的简单表单来计算两个日期的差异。一切工作，除了我不能得到对话框上的结果。这个变量是在onSubmit下定义的，我在console.log中确认了结果是正确的。除了，我似乎可以把它放在对话中。对话框设置正确，因为我可以调用其他东西，但不能调用我感兴趣的变量。我猜问题是，变量没有通过Formik传递。

下面是我的代码:

import React, {useState} from 'react';
import {View, Text, StyleSheet, TextInput, Button, Alert} from 'react-native';
import { Formik } from 'formik';
import DatePicker from 'react-native-datepicker';
import { DateInput } from 'react-native-date-input';
import Dialog from "react-native-dialog";
import { differenceInDays, parse } from "date-fns";
const App = props => {
const [date, setDate] = useState('')
const [date2, setDate2] = useState('')
const [visible, setVisible] = useState(false);
const showDialog = () => {
setVisible(true);
};
const handleCancel = () => {
setVisible(false);
};
return (
<Formik
initialValues={{ date: '', date2: '' }}
onSubmit={values =>
{ console.log(values);
var dubdays = differenceInDays(parse(values.date, "dd MMM yyyy", new Date()), parse(values.date2, "dd MMM yyyy", new Date()));
console.log(dubdays);
showDialog();}
}
>
{({ onDateChange, handleBlur, handleSubmit, setFieldValue, values }) => (
<View>
<Text style={styles.selectDate}>Lab Collection Date</Text>
<DatePicker
style={{ width: 200, alignSelf: 'center' }}
date={date}
mode="date"
placeholder="select date"
format="DD MMM YYYY"
minDate="01 01 2021"
maxDate="31 12 2025"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateIcon: {
position: 'absolute',
left: 0,
top: 4,
marginLeft: 0
},
dateInput: {
marginLeft: 36,
borderRadius: 4
}
// ... You can check the source to find the other keys.
}}
onDateChange={(newDate) => { setFieldValue('date', newDate); setDate(newDate) }}
value={values.date}
onBlur={handleBlur('date')}
/>
<Text style={styles.selectDate}>Symptom Onset Date</Text>
<DatePicker
style={{ width: 200, alignSelf: 'center' }}
date={date2}
mode="date"
placeholder="select date"
format="DD MMM YYYY"
minDate="01 01 2021"
maxDate="31 12 2025"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateIcon: {
position: 'absolute',
left: 0,
top: 4,
marginLeft: 0
},
dateInput: {
marginLeft: 36,
borderRadius: 4
}
// ... You can check the source to find the other keys.
}}
onDateChange={(newDate2) => {setFieldValue('date2', newDate2); setDate2(newDate2)}}
value={values.date2}
onBlur={handleBlur('date2')}
/>
<View style={{width: 200, marginTop: 50, alignSelf: 'center'}} >
<Button onPress={() => { handleSubmit(); }} title="Submit" />
<Dialog.Container visible={visible}>
<Dialog.Title>End of Isolation Date</Dialog.Title>
<Dialog.Description>
{dubdays}
</Dialog.Description>
<Dialog.Button label="Cancel" onPress={handleCancel} />
</Dialog.Container>
</View>
</View>
)}
</Formik>
)
};
const styles = StyleSheet.create({
selectDate: {
fontFamily: 'open-sans',
fontSize: 20,
marginTop: 50,
marginBottom: 10,
alignSelf: 'center',
color: 'red'
},
datebox: {
alignSelf: 'center',
height: 50,
width: 500,
},
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
}
});
export default App;

我正在尝试调用对话框中的{dubdays}。我对react-native相当陌生，所以任何帮助都会非常感激。

Answer 1

让我们分析一下这段代码:

onSubmit={
values => {
console.log(values);
var dubdays = differenceInDays(parse(values.date, "dd MMM yyyy", new Date()), parse(values.date2, "dd MMM yyyy", new Date()));
console.log(dubdays);
showDialog()
}
}

这个变量是在这个函数中声明的，但是它不用于更新组件的状态。

还请注意，由于使用var关键字来声明变量，因此可能会出现如下所述的一些意外行为:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var描述因此，如前所述，您应该将dubdays的值置于组件状态中，然后使用该状态在对话框中呈现该值。这将触发一个新的渲染，并且值将如预期的那样在UI中可见。