如何解决材质ui自动完成功能无法将options参数识别为数组
我正在尝试创建一个自动完成字段,该字段从组件状态(状态从后端获取)中获取选项。这是我的组件:
$rootNode
->children()
->arrayNode('storages')
->isRequired()
->requiresAtLeastOneElement()
->useAttributeAsKey('name')
->arrayPrototype()
->children()
->enumNode('type')
->values(['TYPE_A','TYPE_B'])
->isRequired()
->cannotBeEmpty()
->end()
->scalarNode('connection')->isRequired()->end()
->scalarNode('path')->isRequired()->end() // This should be required AND available only if type is TYPE_A. TYPE_B should not have this parameter.
->end()
->end()
->end()
->end();
但是由于某种原因,我的状态中的options数组无法识别为数组(尽管我使用空数组对其进行了初始化)。我收到此警告:
export const Person: React.FC<PersonProps> = ({name,avatar,setMainState}: PersonProps) => {
const [location,setLocation] = useState('');
const [options,setOptions] = useState([]);
const change = (event: any) => {
setLocation(event.target.value)
setMainState(event.target.value)
}
useEffect(() => {
axios
.get(`http://localhost:8080/autocomplete/?str=` + location)
.then(res => {
setOptions(res.data);
})
},[location])
return <Box display="flex" height="30%">
<Typography>{name}</Typography>
<Autocomplete
id="combo-box-demo"
options={options}
getOptionLabel={(option) => option as string}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
</Box>
};
您知道可能是什么原因吗?任何想法都会有所帮助:) 谢谢!
解决方法
我的假设是,当您这样做时:
setOptions(res.data);
您将options
设置为对象,而不是数组。
实际上,错误提示:
..."options" of type "object" supplied to "ForwardRef(Autocomplete)",expected "array".
因此,它需要一个数组,但是您正在提供一个对象
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。