Formik Setfield在使用material UI自动完成时不更新数组值

Question

当我从api中检索数据时，它以以下格式显示

otherLanguages:[{code:EN,name:"English"},{code:MD,name:"Mandarin"}]

这里我试图用以下数据初始化自动完成。

initialValues: {
otherLanguages: otherLanguages ? otherLanguages : []
},

但是似乎自动完成只接受以下格式的值?我应该转换值以适应下面提到的格式吗?

[{value:"EN",label:"English"},{value:"MD",label:"Mandarin"}]

<Autocomplete
getOptionLabel={(option: { label: any; }) => option.label}
getOptionSelected={(option: { title: string; }) => option.title === 'dull'}
id="tags-standard"
multiple
onChange={(e)=>{console.log(e.target)}}
options={countryLanguages}
popupIcon={<ExpandMoreIcon />}
renderInput={(params: any) => (
<>
<Label color={Colors.Grey900} fontSize="16px"  value="Other Languages"/>
<StyledTextField
{...params}
InputProps={{
...params.InputProps,
endAdornment: (
<InputAdornment position="start"></InputAdornment>
)
}}
variant="standard"
/>
</>
)}
value={formik.values.otherLanguages}
/>

我已经尝试处理事件，但初始值从未更新。此外，当尝试从formik初始状态设置自动补码的值时，它会给出错误

Answer 1

您可以保留您想要的数据结构，但修改Autocomplete的一些属性如下:

onChange={(e, value) => {
formik.setFieldValue("otherLanguages", value);
console.log(e.target);
}}
getOptionLabel={(option) => option.code}

还添加一个属性isOptionEqualToValue，像这样:

isOptionEqualToValue={(option, value) => option.code === value.code}

我认为getOptionSelected是无用的。

希望能有所帮助。