reactjs - MUI 的 Autocomplete AS MULTIPLE input + react-hook-form + 控制默认值不起作用(TypeError : Can't read property 'filter' of undefined)

Question

我正在尝试使用 Material-UI Autocomplete作为 react-hook-form 的多个输入和 control defaultValues动态自动完成(在编辑数据时，根据从数据库中提取的已保存数据渲染预填充的组件)。
所以主要问题是:
控制 Material-UI Autocomplete 中的默认值的最佳方法是什么？组件并与 react-hook-form 一起使用?
到目前为止我做了什么:

通过在 react 中使用函数和钩子(Hook)，我包装了一个
React Hook Form 中的自动完成组件 Controller控制
状态。我试图从 MUI 的文档中实现解决方案
和 react-hook-form以及以下线程的解决方案。
I created a minimal Sandbox here

它是做什么的
当我设置 defaultValue在 Controller ，它可以显示受控的默认值，但会引发错误: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
  />

当我没有设置 defaultValue在 Controller ，它非常适合能够选择 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 的代码文档:
https://material-ui.com/components/autocomplete/#multiple-values

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