如何使用 Yup 验证来验证 React 选择值？

Question

我目前正在使用react-select和是的进行验证，反应选择组件的代码如下所示

import React, { useState, useMemo } from "react";
import Select from "react-select";
import countryList from "react-select-country-list";

function CountrySelector({ register }) {
  const [value, setValue] = useState("");
  const options = useMemo(() => {
    return countryList().getData();
  }, []);

  const changeHandler = (value) => {
    setValue(value);
    console.log(value);
  };
  // console.log(countryList().getData())
  return (
    <>
      <div className="mb-2.5">
        <Select
          placeholder="Select a Country"
          className=""
          options={options}
          value={value}
          {...register}
          onChange={changeHandler}
        />
      </div>
    </>
  );
}

export default CountrySelector;

我的架构如下所示：

const schema = yup.object().shape({
  email: yup
    .string()
    .required("This field is required")
    .email("Please enter a valid email address"),
  password: yup.string().required("This field is required"),
  phoneNumber: yup.string().required("This field is required"),
  username: yup.string().required("This field is required"),
  selectedCountry: yup.object().shape({
    value: yup.string().required("Required"),
    label: yup.string().required("Required"),
  }),
  tosagree: yup
    .bool() // use bool instead of boolean
    .oneOf([true], "You must accept the terms and conditions"),
});

const RegistrationForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });

  const auth = useSelector((state) => state.auth);

  const [showPassword, setShowPassword] = useState(false);

  const dispatch = useDispatch();
  let navigate = useNavigate();
  const togglePasswordHandler = () => setShowPassword((state) => !state);

  const registrationHandler = (data) => {
    console.log(data);
    data = {
      ...data,
      country: selectedCountry.value,
    };

    // console.log(JSON.stringify(data));
    //  dispatch(authActions.register(data));
    registerNewUser(data);
  };

  const registerNewUser = async (userData) => {
    try {
      console.log(` user Data is ${JSON.stringify(userData)}`);
      const { data, status } = await httpClient.post("/usersv2/", userData, {
        validateStatus: () => true,
      });
      console.log(data);
      console.log(status);
      if (status === 201) {
        navigate("/confirm-email");
      }
    } catch (err) {
      console.log(err);
    }
  };

国家选择器的代码是这样的：

<div className="mb-2.5">
  <CountrySelector register={{ ...register("selectedCountry") }} />

  <ErrorMessage message={errors?.selectedCountry?.message} />
</div>

即使在将countrySelected定义为模式中的对象之后，如果我没有值，或者即使我有值，也不会显示错误，有什么帮助吗？

Answer 1

selectedCountry: Yup.string()
        .required()
        .oneOf(["usa", "mexico"])
        .label("Selected Country"),

您可以验证 yup 中的选择选项，因为这尤其如此.oneOf(["usa", "mexico"])

示例工作代码：https://codesandbox.io/s/react-hook-form-js-forked-rezdf8? file=/src/App.js