材料 ui - 自动完成多个错误答案

【问题标题】：material ui - Autocomplete multiple error材料 ui - 自动完成多个错误
【发布时间】：2022-08-09 11:26:20
【问题描述】：

我在 React.js 中使用 material-ui。在自动完成中使用多个时，它会给我错误， Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value).filter is not a function at useAutocomplete, 上述错误发生在 <ForwardRef(Autocomplete)> 组件中：在 ForwardRef（自动完成）中。

material-ui 版本 - \"@mui/material\": \"^5.6.0\",

代码：

                        <Autocomplete
                              multiple={true}
                              disableCloseOnSelect
                              id={field.name}
                              name={field.name}
                              options={locations}
                              value={props.values.locationId}
                              size=\"small\"
                              autoComplete={false}
                              onChange={(e, newValue) => {
                                props.setFieldValue(
                                  \'locationId\',
                                  newValue ? newValue : \'\',
                                  true,
                                );
                              }}
                              onBlur={() =>
                                props.setFieldTouched(field.name, true)
                              }
                              getOptionLabel={(option) =>
                                option[\'name\'] ? option[\'name\'] : \'\'
                              }
                              renderOption={(props, option, { selected }) => (
                                <li {...props}>
                                  <Checkbox
                                    style={{ marginRight: 8 }}
                                    checked={selected}
                                  />
                                  {option.title}
                                </li>
                              )}
                              renderInput={(params) => (
                                <TextField
                                  {...params}
                                  fullWidth
                                  size=\"small\"
                                  placeholder={field.placeholder}
                                  variant=\"outlined\"
                                />
                              )}
                            />

这很可能是您用于 options 属性的 locations 数组的问题。如果它是字符串或对象之类的东西，它会抛出类似的错误。

标签： reactjs material-ui

【解决方案1】：

使用multiple 时，value 必须是一个数组（参见docs 中的multiple）。我发现this answer 有助于在multiple 模式下使用受控自动完成组件，就像您在此处所做的那样。

【讨论】：