必须为 Field(auto) 指定渲染道具、渲染函数作为子级或组件道具

Question

我在使用 final-form

开发 Auto complete 时遇到错误

必须为 Field(auto)

指定渲染道具、子渲染函数或组件道具

我从中得到帮助 link https://trejgun.github.io/articles/bindings-for-using-final-form-with-material-ui-autocomplete/

但是当我实现上面的代码时，我遇到了上面的错误

这是我的代码 https://codesandbox.io/s/relaxed-breeze-hv58o

 <Field
              name="auto"
              multiple={true}
              component={AutoCompleteWrapper}
              placeholder="First Name"
              options={[{ label: "The Shawshank Redemption", values: 1994 }]}
            />

Answer 1

在您的代码箱中，在 test.js 中，您正在将 AutoCompleteWrapper 导出为 named 导出：

export const AutoCompleteWrapper = props => {

但在您的 index.js 文件中，您将其导入为默认 :

import AutoCompleteWrapper from "./test";

因此您可以通过以下两种方式之一解决该问题：

导入命名导出

import { AutoCompleteWrapper } from "./test";

将导出更改为默认值

const AutoCompleteWrapper = props => {
  ...
};

export default AutoCompleteWrapper;

必须为 Field(auto) 指定渲染道具、渲染函数作为子级或组件道具

Must specify either a render prop, a render function as children, or a component prop to Field(auto)

javascript

reactjs

material-ui

final-form

react-final-form