MUI 的 Autocomplete AS MULTIPLE input + react-hook-form + 控制默认值不起作用（TypeError: Can't read property 'f

Posted 2023-02-22

【中文标题】MUI 的 Autocomplete AS MULTIPLE input + react-hook-form + 控制默认值不起作用（TypeError: Can\'t read property \'filter\' of undefined）

【英文标题】：MUI's Autocomplete AS MULTIPLE input + react-hook-form + controlling default values not working (TypeError: Can't read property 'filter' of undefined)MUI 的 Autocomplete AS MULTIPLE input + react-hook-form + 控制默认值不起作用（TypeError: Can't read property 'filter' of undefined）

【发布时间】：2020-11-18 19:53:19

【问题描述】：

我正在尝试将Material-UI Autocomplete 用作多个输入，其中react-hook-form 和control 动态自动完成的defaultValues（根据从数据库获取的已保存数据，在编辑数据时渲染组件预填充） .

所以主要问题是：

控制Material-UI Autocomplete 组件中的默认值并将其与react-hook-form 一起使用的最佳方法是什么？

到目前为止我做了什么：

在 react 中使用函数和钩子，我已经包装了一个 React Hook Form 的 Controller 中的自动完成组件来控制 国家。我试图从 MUI 的文档中实现解决方案 和react-hook-form 以及以下线程的解决方案。

I created a minimal Sandbox here

它的作用

当我在Controller 中设置defaultValue 时，它可以显示受控的默认值，但会引发错误：TypeError: Cannot read property 'filter' of undefined

  <Controller
      as=
      <Autocomplete
        multiple
        value=defaultValues
        onChange=(e, values) => setValue("food", values)
        ...
        renderInput=params => ( ... )
      />
    
    control=control
    name="food"
    defaultValue=defaultValues // <- this makes the error
  />

当我没有在Controller 中设置defaultValue 时，它可以完美地选择multiple 的值，但它不显示默认值。

令人困惑的是，Autocomplete 必须用value/onChange 控制，Controller 必须用defaultValue/setValue 控制，在我的情况下它们似乎冲突。

设置defaultValue= [] 并使用 useEffect 并仅使用控制默认值 setValue("food", defaultOption);

So i created another Sandbox here

感谢 Bill 的回答，我将代码重构为 renderProp 就像文档中提出的那样：

Yet another sandbox here

现在它就像一个魅力，但我必须设置 onChange 属性 Autocomplete 是这样的：

onChange=(e, values) => setValue("food", values)

而不是文档建议做的事情：（使用传递的 onChange）

onChange=e => props.onChange(e.something)

它有效，但这是将Autocomplete 和 react-hook-form?

将问题与这些主题进行比较：

与我尝试做的其他线程的主要区别是设置defaultValues 的multiple Autocomplete。

Proper way to use react-hook-form Controller with Material-UI Autocomplete

MUI Autocomplete's 'defaultValue' not working when used with Controller of react-hook-form

Why is initial value not set in Material UI Autocomplete using react-hook-form?

react-hook-form 文档中的建议解决方案：

https://react-hook-form.com/api/#Controller

还有来自Material UI docs 的代码：

https://material-ui.com/components/autocomplete/#multiple-values

【问题讨论】：

如果您使用的是 V6，请考虑使用 render prop。

【参考方案1】：

现在它就像一个魅力，但我必须设置 onChange 道具 像这样自动完成：

onChange=(e, values) => setValue("food", values)

你可以onChange=(e, newValue) => props.onChange(newValue)

【参考方案2】：

但是，我还没有找到使用 react-hook-form 验证这一点的方法

您可以尝试自定义验证（如果您使用 MUI 的 Autocomplete 和 multiple=true）：

<Controller
...
rules=
   validate: (data) => 
     if(data.length === 0) return false;
   

/>

【参考方案3】：

我能够通过执行以下操作来完成这项工作：

                                <Controller
                                    name='test'
                                    control=control
                                    render=(onChange, ...props) => (
                                        <AutoComplete
                                            ...props
                                            data-testid='test-select'
                                            width=350
                                            label='Auto Complete'
                                            onChange=onChange
                                            options=eventTypes
                                            getOptionLabel=(option) => option ? option.name : ''
                                            renderOption=(option) => option.name 
                                            getOptionSelected=(option) => option.name
                                            renderInput=(params) => (
                                                <TextField ...params error=error helperText=helperText label=label placeholder=label />
                                            )
                                            onChange=(e, data) => onChange(data)
                                            ...props
                                        />
                                    )
                                />

【讨论】：

但是，我还没有找到使用 react-hook-form 验证这一点的方法