React Hook Form V7 - Material UI 5 自动完成：未验证延迟加载的值

Question

我使用 React-hook-form V7 和 Material UI 5 自动完成输入。我在自动完成中的延迟加载值在第一次提交单击时（但在第二次单击时）未验证。怎么了？

  useEffect(() => {
    setItemList([
      { id: 1, name: "item1" },
      { id: 2, name: "item2" }
    ]);
    setItemIdSelected(2);
  }, []);

  [...]

  <Autocomplete
    options={itemList}
    getOptionLabel={(item) => (item.name ? item.name : "")}
    getOptionSelected={(option, value) =>
      value === undefined || value === "" || option.id === value.id
    }
    value={
      itemIdSelected
        ? itemList.find((item) => item.id === itemIdSelected)
        : ""
    }
    onChange={(event, items) => {
      if (items !== null) {
        setItemIdSelected(items.id);
      }
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        {...itemsIdFormHookRest}
        label="items"
        margin="normal"
        variant="outlined"
        inputRef={itemsIdFormHookRef}
        error={errors.itemsId ? true : false}
        helperText={errors.itemsId && "item required"}
        required
      />
    )}
  />
  
[...]

请查看代码沙箱上的代码：

Answer 1

您应该使用 React Hook Form 提供的组件Autocomplete来包装 Material UI 。请参阅文档中的Controller此部分以获取更多信息。

我还建议删除useState保存id，因为您还可以在调用回调期间getValues或之后通过 React Hook Form 访问该值。handleSubmit

这是更新后的CodeSandbox。