使用 Material UI 的 AutoComplete + react hook 表单时出错答案

【问题标题】：Error using AutoComplete of Material UI + react hook form使用 Material UI 的 AutoComplete + react hook 表单时出错
【发布时间】：2021-05-17 18:17:31
【问题描述】：

我正在使用材质 Ui 的组件“自动完成”来渲染多个复选框，并将选择的选项显示到 TextField 中。当我提交表单时发生错误。选中的复选框的值为空，如下所示： category: "" 似乎反应钩子形式无法识别名称“类别”，如下所示：

 <Autocomplete
    id="checkboxes-tags-demo"
    fullWidth
    multiple
    limitTags={2}
    getOptionLabel={(option) => option.title}
    disableCloseOnSelect
    noOptionsText="Nenhuma opção foi encontrada"
    variant="outlined"
    options={newCategories}
    renderOption={(option, {selected}) => {
      return (
        <Box key={option.id} ml={option?.isSub ? 3 : 0}>
           <Checkbox
              icon={icon}
              checkedIcon={checkedIcon}
              checked={selected}
            />
            {option.title}
        </Box>
       )
     }
    }
    renderInput={(params) =>
      <TextField
        name="category"
        inputRef={register}
        {...params}
        label="Selecione a categoria"
        variant="outlined" />}
      />
    }
/>

【问题讨论】：

标签： reactjs autocomplete material-ui react-hook-form

【解决方案1】：

您需要使用 React Hook Form 提供的 Controller 组件包装 Material UI Autocomplete。有关详细信息，请参阅文档中的 section。

【讨论】：

谢谢！！它在 codeSandbox 上运行良好，但是当我在我的项目中使用时，我在“值”上未定义，当：render={({ field: { value, onChange } })。你认为这可能是我的 React Hook 表单版本吗？我目前正在使用：“react-hook-form”：“^6.15.3”，
是的，对不起。我为 CodeSandbox 使用了最新版本 v7。在这个新版本中，render prop 函数的签名发生了变化。对于 v6，它将是：render={({ value, onChange }) => ... }.
嘿！如果您能提供更多帮助，我从昨天开始就尝试这样做。现在我使用相同的组件，但现在要编辑数据。我必须设置默认检查值。起初，它似乎工作正常，但如果您单击选中的按钮不会按预期工作。这里是沙盒：codesandbox.io/embed/…
Autocomplete 默认使用严格相等来确定是否选择了选项。由于您的defaultCategory 对象没有与newCategories 相同的引用，因此检查将失败。您必须使用 getOptionSelected 属性从 newCategories 中为您的所有 defaultCategory 对象找到正确且对应的对象。查看docs 了解更多信息。这是更新后的CodeSandbox。