MUI的Autocomplete AS MULTIPLE输入+ react-hook-form +控制默认值不起作用(TypeError:无法读取未定义的属性"filter") [英] MUI's Autocomplete AS MULTIPLE input + react-hook-form + controlling default values not working (TypeError: Can't read property 'filter' of undefined)
问题描述
我正在尝试将 Material-UI Autocomplete 作为具有 react-hook-form 和 control defaultValues 动态完成(在编辑数据时，基于从数据库中获取的已保存数据，呈现预填充的组件).
I am trying to use Material-UI Autocomplete as multiple input with react-hook-form and control the defaultValues of the Autocomplete dynamically (render the component prefilled, when editing data, based on already saved data fetched from a database).
所以主要问题是:
在 Material-UI Autocomplete 组件中控制默认值并将其与 react-hook-form 一起使用的最佳方法是什么?
What is the best way to control the default values in an Material-UI Autocomplete component and use it with react-hook-form?
我到目前为止所做的事情:
-
通过在react中使用函数和钩子，我包装了一个React Hook Form的
Controller中的自动完成组件可以控制状态.我试图从MUI的文档中实施解决方案和react-hook-form以及以下线程的解决方案.
With using functions and hooks in react, I have wrapped an Autocomplete component in React Hook Form's
Controllerto control the state. I tried to implemented the solutions from the docs of MUI andreact-hook-formand the solutions of the below threads.
功能
当我在 Controller 中设置 defaultValue 时，它可以显示受控的默认值，但会引发错误: TypeError:无法读取属性'filter'未定义
When i set the defaultValue in Controller, it works to display the controlled default value, but throws me an error: 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 个值，效果很好，但是它没有显示默认值.
When i don't set the defaultValue in Controller, it works perfectly to being able to select multiple values like expected, but it doesn't show the default value.
令人困惑的是， Autocomplete 必须通过 value/onChange 进行控制，而 Controller 则必须通过 defaultValue/setValue ，看来在我的情况下它们是冲突的.
What is so confusing is, that the Autocomplete has to be controlled with value/onChange and also the Controller has to control with defaultValue/setValue, and it seems they conflict in my case.
-
设置
defaultValue = {[]}并使用useEffect并仅使用setValue("food"，defaultOption);
由于Bill的回答，我将代码重构为renderProp像文档中建议的那样:
现在它就像一个咒语，但是我必须设置 onChange 的道具自动完成是这样的:
Now it works like a charm, but i had to set the onChange prop of
the Autocomplete like this:
onChange = {(e，values)=>setValue("food"，values)}
代替文档建议的操作:(使用传递的onChange)
instead of what the docs proposed to do: (using the passed onChange)
onChange = {e =>props.onChange(e.something)}
它可以工作，但这是结合 Autocomplete 和 react-hook-form ?
It works, but is this the right way to combine Autocomplete and
react-hook-form?
将问题与以下主题进行比较:
与我尝试执行的其他线程的主要区别是设置多个自动完成的 defaultValues .
The main difference to the other threads i am trying to do, is to set the defaultValues of a multiple Autocomplete.
正确使用React的方式具有Material-UI自动完成功能的-hook-form控制器
MUI Autocomplete的"defaultValue"不起作用当与react-hook-form的控制器一起使用时
react-hook-form 文档中的建议解决方案:
The advised solution in the docs of react-hook-form:
https://react-hook-form.com/api/#Controller
和 Material UI docs中的代码:
And the Code from Material UI docs:
https://material-ui.com/components/autocomplete/#multiple-值
推荐答案
但是，我还没有找到一种使用react-hook-form进行验证的方法
However, I've not found a way to validate this using react-hook-form
您可以尝试进行自定义验证(以防万一，如果您使用MUI的具有多个= {true}的自动完成功能)
You could try custom validation (in case if you are using MUI's Autocomplete with multiple={true}):
<Controller
...
rules={{
validate: (data) => {
if(data.length === 0) return false;
}
}}
/>
这篇关于MUI的Autocomplete AS MULTIPLE输入+ react-hook-form +控制默认值不起作用(TypeError:无法读取未定义的属性"filter")的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
