React中的自动完成设置默认值

Question

我需要在我的react应用程序的自动完成中具有默认值。我的问题是当我尝试提交它时，它仍然无效。意味着它没有任何价值。我需要单击自动完成功能，然后再次选择它以使其具有该值。

请检查此代码和框链接CLICK HERE

          <Autocomplete
            name="member_status"
            value={values.member_status}
            options={memberStatuses ? memberStatuses : []}
            getOptionLabel={(memberStatus) => memberStatus.name}
            onChange={(e, value) => {
              setFieldValue(
                "member_status",
                value !== null ? value.id : ""
              );
            }}
            renderInput={(params) => (
              <TextField
                {...params}
                label="Member Status"
                name="member_status"
                variant="outlined"
                onBlur={handleBlur}
                helperText={
                  touched.member_status ? errors.member_status : ""
                }
                error={
                  touched.member_status && Boolean(errors.member_status)
                }
              />
            )}
          />

Answer 1

这里的问题是，您将Autocomplete的初始值设置为object，然后要验证string。

将您的validationSchema更改为

const validationSchema = yup.object().shape({
  member_status: yup
    .object()
    .shape({
      id: yup.number(),
      name: yup.string()
    })
    .nullable()
    .required("Select member status")
});

和您的Autocomplete的{​​{1}}处理程序

onChange

应该工作。