时间戳

首页 > 解决方案 > 使用 react-native-dialog 和 date-fns 时变量未在 Formik 中初始化

react-native - 使用 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, "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 还很陌生，所以任何帮助都将不胜感激。

标签： react-nativeformikdate-fns

解决方案

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

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#description

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

推荐阅读