MUI 的自动完成 AS 多个输入+react-hook-form+控制默认值不起作用（TypeError：无法读取未定义的属性“过滤器”）

Question

我正在尝试将和用作Material-UI Autocomplete多重输入react-hook-formcontroldefaultValues在编辑数据时，根据从数据库获取的已保存数据渲染预填充的组件）

\n

所以主要问题是：

\n

控制Material-UI Autocomplete组件中的默认值并将其与react-hook-form？

\n

到目前为止我做了什么：

\n

\n

1. 通过在 React 中使用函数和钩子，我在 React Hook Form 中包装了一个自动完成组件Controller来控制状态。我尝试实现 MUI 文档中的解决方案\nandreact-hook-form以及以下线程的解决方案。

   \n

   我在这里创建了一个最小的沙箱

   \n
\n

\n

它能做什么

\n

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

\n

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

\n

当我不设置defaultValuein时Controller，它可以完美地选择multiple预期的值，但它不显示默认值。

\n

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

\n

\n

2. defaultValue={\xc2\xa0[] }当设置和使用 a\nuseEffect并仅使用\n 控制默认值时效果更好setValue("food", defaultOption);

   \n

   所以我在这里创建了另一个沙箱

   \n
\n

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

   \n

   这里还有另一个沙箱

   \n

   现在它就像一个魅力，但我必须像这样设置onChange\n的道具：Autocomplete

   \n

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

   \n

   而不是文档建议执行的操作：（使用传递的 onChange）

   \n

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

   \n

   Autocomplete它有效，但是这是组合and\n的正确方法吗react-hook-form？

   \n
\n

\n

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

\n

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

\n

将react-hook-form控制器与Material-UI Autocomplete一起使用的正确方法

\n

与react-hook-form控制器一起使用时，MUI自动完成的“defaultValue”不起作用

\n

为什么未使用react-hook-form在Material UI Autocomplete中设置初始值？

\n

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

\n

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

\n

以及文档中的代码Material UI：

\n

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

\n

Answer 1

我能够通过执行以下操作来使其工作：

                                <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}
                                        />
                                    )}
                                />