如何使用反应钩子形式在反应选择延迟一段时间后设置defaultValue

Question

我正在使用带有react-hook-form库的react-select下拉菜单。我正在调用 api 来获取反应选择的默认值。最初，下拉列表无法预填充默认值。所以我找到了一个解决方法，当我从 api 获取数据时重新渲染整个 JSX。

<form onSubmit={handleSubmit(saveData)}>
{!countryValue && (
      <Controller
        name="country"
        control={control}
        render={({ onChange, value, ref }) => (
          <Select
            options={country}
            value={country.find((c) => c.value === value)}
            onChange={(val) => onChange(val.value)}
          />
        )}
        rules={{ required: true }}
      />
    )}
    {countryValue && (
      <Controller
        name="country"
        control={control}
        render={({ onChange, value, ref }) => (
          <Select
            options={country}
            value={country.find((c) => c.value === value)}
            onChange={(val) => onChange(val.value)}
            defaultValue={country.find((c) => c.value === countryValue)}
          />
        )}
        rules={{ required: true }}
      />
    )}
{errors.country && <div>Field is rquired</div>}
    <button type="submit">Save</button>
  </form>

我在countryValue 上设置了一个条件，即当组件获取countryValue 的值时，它会渲染整个下拉列表。

但是，当我使用相同的 defaultValue 挂钩表单提交表单时，会出现国家/地区字段未定义的错误。

我为此创建了一个沙箱。 https://codesandbox.io/s/react-select-with-react-hook-form-sc2xz

怎样才能解决这个问题呢。他们有什么解决方法吗？

Answer 1

我认为，您应该在拥有现有组件时直接在现有组件上设置该值，而不是重新创建一个新组件来为其赋予默认值。

为此，您可以使用setValue从返回的对象中获取的内容useForm()。

这是代码的一部分：

  const { handleSubmit, control, errors, setValue } = useForm();

  useEffect(() => {
    setTimeout(() => {
      setValue("country", "India");
    }, 2000);
  }, [setValue]);

这是codesandbox。