使用 react-native-dialog 和 date-fns 时，Formik 中的变量未初始化

如何解决使用 react-native-dialog 和 date-fns 时，Formik 中的变量未初始化

我有一个使用 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,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',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,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 还很陌生，所以任何帮助都将不胜感激。

解决方法

好吧，让我们分析一下这段代码：

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

该变量在此函数中声明，但不用于更新组件的状态。

另请注意，由于您使用了 var 关键字来声明您的变量，因此您可能会遇到一些意外行为，如下所述：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#description

因此，如上所述，您应该将 dubdays 的值放在组件状态中，然后使用该状态在对话框中呈现该值。这将触发新的渲染，并且该值将按预期在 UI 中可见。