branch 不是使用 yup 模式与 when 和 then 进行反应的函数

问题描述 投票：0回答：1

在使用 yup 进行反应时，我创建了这个模式

const RefereeFormSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  mobile: Yup.string().matches(APP_CONFIG.REGEX_PHONE, 'Invalid Mobile').required('Mobile is required'),
  relationship: Yup.string().required('Relationship is required'),
  isContacted: Yup.boolean().required('Contacted status is required'),
  contactDate: Yup.date().when('isContacted', {
    is: true,
    then: Yup.date().required('Contact date is required'),
    otherwise: Yup.date(),
  }),
});

ui 被渲染，但是当我在输入框中输入任何内容或尝试使用它显示的下拉菜单更改值时

branch is not a function
TypeError: branch is not a function
    at Condition.fn (http://localhost:3000/static/js/vendors-node_modules_formik_dist_formik_esm_js-node_modules_yup_index_esm_js.chunk.js:2510:51)
    at Condition.resolve (http://localhost:3000/static/js/vendors-node_modules_formik_dist_formik_esm_js-node_modules_yup_index_esm_js.chunk.js:2523:23)
    at http://localhost:3000/static/js/vendors-node_modules_formik_dist_formik_esm_js-node_modules_yup_index_esm_js.chunk.js:2919:71

这有什么问题吗？

更新1

现在我尝试了这个

const RefereeFormSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  mobile: Yup.string().matches(APP_CONFIG.REGEX_PHONE, 'Invalid Mobile').required('Mobile is required'),
  relationship: Yup.string().required('Relationship is required'),
  isContacted: Yup.boolean().required('Contacted status is required'),
  contactDate: Yup.date()
    .when('isContacted', {
      is: true,
      then: Yup.date().required('Contact date is required'),
    })

现在，当我仅单击 isContacted 字段的复选框时，会引发相同的错误

默认情况下，复选框未选中，并且不显示联系日期，但在这种情况下，我无法单击“保存”按钮

这是 jsx

const RefereeFormSchema = Yup.object().shape({
  name: Yup.string().required('Name is required'),
  mobile: Yup.string().matches(APP_CONFIG.REGEX_PHONE, 'Invalid Mobile').required('Mobile is required'),
  relationship: Yup.string().required('Relationship is required'),
  isContacted: Yup.boolean().required('Contacted status is required'),
  contactDate: Yup.date()
    .when('isContacted', {
      is: true,
      then: Yup.date().required('Contact date is required'),
    })
  // .when('isContacted', {
  //   is: false,
  //   then: Yup.date(),
  // }),
});

const RefereeForm = ({ referee, enquiryId, onSave, onClose }) => {
  console.log("RefereeForm ~ enquiryId:", enquiryId);
  const [editMode, setEditMode] = useState(!referee?.id);

  const formikRefereeForm = useFormik({
    initialValues: {
      id: referee?.id || 0,
      enquiryId: enquiryId,
      name: referee?.name || '',
      mobile: referee?.mobile || '',
      relationship: referee?.relationship || '',
      isContacted: referee?.isContacted || false,
      contactDate: referee?.contactDate || null,
    },
    validationSchema: RefereeFormSchema,
    onSubmit: async (values) => {
      await onSave(values);
      setEditMode(false);
    },
  });

  const handleEdit = () => {
    setEditMode(true);
  };

  return (
    <FormikProvider value={formikRefereeForm}>
      <Form autoComplete="off" noValidate onSubmit={formikRefereeForm.handleSubmit}>
        <Card sx={{ p: 3 }}>
          <Grid container rowSpacing={3} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
            <Grid item xs={12}>
              <Grid container justifyContent="space-between" alignItems="center">
                <Grid item>
                  <Typography variant="h6" component="div">
                    Referee: {referee?.name || 'New Referee'}
                  </Typography>
                </Grid>
              </Grid>
            </Grid>

            <Grid item xs={12}>
              <TextField
                required
                name="name"
                label="Name"
                autoComplete="off"
                error={formikRefereeForm.touched.name && Boolean(formikRefereeForm.errors.name)}
                helperText={formikRefereeForm.touched.name && formikRefereeForm.errors.name}
                onChange={formikRefereeForm.handleChange}
                value={formikRefereeForm.values.name}
                fullWidth
                disabled={!editMode}
                InputLabelProps={{
                  shrink: true,
                }}
              />
            </Grid>

            <Grid item xs={12}>
              <TextField
                required
                name="mobile"
                label="Mobile"
                autoComplete="off"
                error={formikRefereeForm.touched.mobile && Boolean(formikRefereeForm.errors.mobile)}
                helperText={formikRefereeForm.touched.mobile && formikRefereeForm.errors.mobile}
                onChange={formikRefereeForm.handleChange}
                value={formikRefereeForm.values.mobile}
                fullWidth
                InputLabelProps={{
                  shrink: true,
                }}
              />
            </Grid>

            <Grid item xs={12}>
              <TextField
                required
                name="relationship"
                label="Relationship"
                select
                autoComplete="off"
                error={formikRefereeForm.touched.relationship && Boolean(formikRefereeForm.errors.relationship)}
                helperText={formikRefereeForm.touched.relationship && formikRefereeForm.errors.relationship}
                onChange={formikRefereeForm.handleChange}
                value={formikRefereeForm.values.relationship}
                fullWidth
                disabled={!editMode}
                InputLabelProps={{
                  shrink: true,
                }}
              >
                {/* {Object.keys(Relationship).map((relationship, index) => (
                  <MenuItem key={index} value={relationship}>
                    {relationship}
                  </MenuItem>
                ))} */}
                <MenuItem value={Relationship.FamilyMember}>{Relationship.FamilyMember}</MenuItem>
                <MenuItem value={Relationship.Friend}>{Relationship.Friend}</MenuItem>

              </TextField>
            </Grid>

            <Grid item xs={12}>
              <FormControlLabel
                control={
                  <Checkbox
                    name="isContacted"
                    color="primary"
                    checked={formikRefereeForm.values.isContacted}
                    onChange={formikRefereeForm.handleChange}
                    disabled={!editMode}
                    InputLabelProps={{
                      shrink: true,
                    }}
                  />
                }
                label="Is Contacted"
              />
              {formikRefereeForm.errors.isContacted && formikRefereeForm.touched.isContacted && (
                <FormHelperText error>{formikRefereeForm.errors.isContacted}</FormHelperText>
              )}
            </Grid>

            {formikRefereeForm.values.isContacted && (
              <Grid item xs={12}>
                <TextField
                  required
                  name="contactDate"
                  label="Contact Date"
                  type="date"
                  onChange={formikRefereeForm.handleChange}
                  value={formikRefereeForm.values.contactDate}
                  fullWidth
                  disabled={!editMode}
                  InputLabelProps={{
                    shrink: true,
                  }}
                />
              </Grid>
            )}

            <Grid item xs={12}>
              <Grid container justifyContent="flex-end">
                <Button variant="outlined" onClick={onClose} sx={{ mr: 2 }}>
                  Cancel
                </Button>
                {editMode ? (
                  <>
                    <Button type="submit" variant="contained" color="inherit"
                      disabled={!editMode}>
                      Save
                    </Button>
                  </>
                ) : (
                  <Button variant="contained" color="inherit" onClick={handleEdit}>
                    Edit
                  </Button>
                )}
              </Grid>
            </Grid>
          </Grid>
        </Card>
      </Form>
    </FormikProvider>
  );
};

RefereeForm.propTypes = {
  referee: RefereePropType,
  enquiryId: PropTypes.number.isRequired,
  onSave: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
};

export default RefereeForm;
reactjs yup
1个回答
0
投票

then
和 
otherwise
字段应为 functions。

  contactDate: Yup.date()
    .when('isContacted', {
      is: true,
      then: (s) => s.required('Contact date is required'),
    })
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.