无法使用自定义组件读取未定义(读取"类型")formik 的属性

Question

我正在将formik与我的自定义组件一起使用。

这就是我使用的方式

<Field id="basic-typeahead-single"
options={this.state.variables}
labelKey="name"
selected={this.state.singleSelection}
placeholder="Choose a Variable" name={`conditions.${index}.variable`}
component={AutoComplete} />

这是我使用Typehead 的AutoComplete

const AutoComplete = ({ field, form, ...props }) => {
return <Typeahead
{...field} {...props}
/>
};

这会显示下拉列表，并且在选择任何值时都会显示

Formik.tsx:600 Uncaught TypeError: Cannot read properties of undefined (reading 'type')
at Formik.tsx:600:1
at Formik.tsx:653:1
at Object.onChange (Formik.tsx:1200:1)
at Typeahead._handleChange (Typeahead.js:358:1)
at Typeahead.<anonymous> (Typeahead.js:530:1)
at callCallback (react-dom.development.js:12318:1)
at commitUpdateQueue (react-dom.development.js:12339:1)

问题出在哪里？我该如何解决这个问题？

Answer 1

我必须添加onChange方法，然后使用setFieldValue需要像这个一样更新值

onChange={e => {
if (e && e.length) {
setFieldValue(`conditions.${index}.variable`, e[0].name)
} else {
setFieldValue(`conditions.${index}.variable`, null);
}
}}