在 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 的onChange 处理程序

...
onChange={(e, value) => {
  setFieldValue("member_status", value); // set the new value to an object, not string
}}

应该可以。