2

我正在创建一个 formik 表单以将一些输入上传到 firebase

当我提交表单时，我的 formik 值对象中有一个未知的对象对象变量，当我尝试将新数据添加到我的 firestore 时导致错误（对象对象：未定义）

以前有人遇到过这个问题吗？你如何解决它？

下面是我的表单代码

谢谢

    import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
import { connect } from "react-redux";
import { Formik } from "formik";
// import * as Yup from "yup";
import DatePicker from "react-native-datepicker";
import { Button } from "react-native-elements";

import Input from "../../components/Input";
import { addVoucher } from "../../redux/actions";

class VoucherCreate extends Component {
  _handleSubmit = values => {
    console.log(values);
    // this.props.addVoucher(values);
  };

  render() {
    const { container, buttonStyle } = styles;

    return (
      <View style={container}>
        <Formik
          initialValues={{
            title: "",
            redeemAmount: "",
            description: "",
            validUntil: "2020-08-08"
          }}
          onSubmit={this._handleSubmit}
          // validationSchema={Yup.object().shape({
          //   redeemAmount: Yup.number("Amount must be a number").required(
          //     "Amount is required"
          //   )
          // })}
          render={({
            values,
            handleSubmit,
            errors,
            touched,
            setFieldValue,
            setFieldTouched,
            isValid,
            isSubmitting
          }) => (
            <React.Fragment>
              <Input
                label="Title"
                value={values.title}
                name="title"
                onChange={setFieldValue}
                onTouch={setFieldTouched}
              />
              <Input
                label="Redemption Amount"
                name="redeemAmount"
                autoComplete="none"
                keyboardType={"numeric"}
                value={values.redeemAmount}
                onChange={setFieldValue}
                onTouch={setFieldTouched}
                error={touched.redeemAmount && errors.redeemAmount}
              />
              <Input
                label="Description"
                name="description"
                value={values.description}
                onChange={setFieldValue}
                onTouch={setFieldTouched}
              />
              <View style={{ flexDirection: "row" }}>
                <View
                  style={{
                    paddingLeft: 5,
                    justifyContent: "center",
                    paddingRight: 20
                  }}
                >
                  <Text style={{ color: "grey" }}>Valid Until</Text>
                </View>
                <DatePicker
                  style={{ width: 180 }}
                  date={values.validUntil}
                  mode="date"
                  format="YYYY-MM-DD"
                  minDate={Date.now.toString()}
                  maxDate="2050-06-01"
                  confirmBtnText="Confirm"
                  cancelBtnText="Cancel"
                  showIcon={false}
                  customStyles={{
                    dateInput: {
                      marginLeft: 0,
                      borderColor: "#fff"
                    }
                  }}
                  onDateChange={date => setFieldValue("validUntil", date)}
                  onTouch={setFieldTouched}
                />
              </View>
              />
              <Button
                backgroundColor="purple"
                buttonStyle={buttonStyle}
                title="Submit"
                onPress={handleSubmit}
                disabled={!isValid || isSubmitting}
                loading={isSubmitting}
              />
            </React.Fragment>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center"
    // justifyContent: "center"
  },
  buttonStyle: {
    marginTop: 20,
    width: "100%"
  }
});

export default connect(
  null,
  { addVoucher }
)(VoucherCreate);
4

0 回答 0