material ui 自动完成无法将选项参数识别为数组
material ui autocomplete doesn't recognize options parameter as array
我正在尝试创建一个自动完成字段,该字段从组件状态(状态从后端获取)中获取选项。这是我的组件:
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>
};
但出于某种原因,我的状态中的选项数组未被识别为数组(尽管我使用空数组对其进行了初始化)。我收到此警告:
index.js:1 Warning: Failed prop type: Invalid prop `options` of type `object` supplied to `ForwardRef(Autocomplete)`, expected `array`.
in ForwardRef(Autocomplete) (created by WithStyles(ForwardRef(Autocomplete)))
in WithStyles(ForwardRef(Autocomplete)) (at Person.tsx:56)
in div (created by Styled(MuiBox))
in Styled(MuiBox) (at Person.tsx:49)
in Person (at Main.tsx:14)
in div (created by Styled(MuiBox))
in Styled(MuiBox) (at Main.tsx:13)
in div (created by Styled(MuiBox))
in Styled(MuiBox) (at Main.tsx:12)
in Main (at App.tsx:11)
in div (at App.tsx:10)
in App (at src/index.tsx:6)
您知道可能是什么原因吗?任何想法都会有所帮助:)
谢谢!
我的假设是,当您这样做时:
setOptions(res.data);
您正在将 options
设置为对象,而不是数组。
事实上,错误是这样说的:
..."options" of type "object" supplied to "ForwardRef(Autocomplete)", expected "array".
所以它需要一个数组,但你提供了一个对象
<Autocomplete
id="free-solo-2-demo"
value={search.scheme_name}
className={classes.textInput}
options={[...schemeList]}
getOptionLabel={(schemeList) => schemeList.scheme_name || ""}
onChange={(e, value) => {
if (value !== null) {
setSearch({ ...search, scheme_name: value });
} else {
setSearch({ ...search, scheme_name: "" });
}
}}
renderInput={(params) => (
<TextField
{...params}
label="Scheme Name"
name="scheme_name"
// margin="normal"
variant="outlined"
size="small"
InputProps={{
...params.InputProps,
type: "search",
}}
/>
)}
/>
我正在尝试创建一个自动完成字段,该字段从组件状态(状态从后端获取)中获取选项。这是我的组件:
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>
};
但出于某种原因,我的状态中的选项数组未被识别为数组(尽管我使用空数组对其进行了初始化)。我收到此警告:
index.js:1 Warning: Failed prop type: Invalid prop `options` of type `object` supplied to `ForwardRef(Autocomplete)`, expected `array`.
in ForwardRef(Autocomplete) (created by WithStyles(ForwardRef(Autocomplete)))
in WithStyles(ForwardRef(Autocomplete)) (at Person.tsx:56)
in div (created by Styled(MuiBox))
in Styled(MuiBox) (at Person.tsx:49)
in Person (at Main.tsx:14)
in div (created by Styled(MuiBox))
in Styled(MuiBox) (at Main.tsx:13)
in div (created by Styled(MuiBox))
in Styled(MuiBox) (at Main.tsx:12)
in Main (at App.tsx:11)
in div (at App.tsx:10)
in App (at src/index.tsx:6)
您知道可能是什么原因吗?任何想法都会有所帮助:) 谢谢!
我的假设是,当您这样做时:
setOptions(res.data);
您正在将 options
设置为对象,而不是数组。
事实上,错误是这样说的:
..."options" of type "object" supplied to "ForwardRef(Autocomplete)", expected "array".
所以它需要一个数组,但你提供了一个对象
<Autocomplete
id="free-solo-2-demo"
value={search.scheme_name}
className={classes.textInput}
options={[...schemeList]}
getOptionLabel={(schemeList) => schemeList.scheme_name || ""}
onChange={(e, value) => {
if (value !== null) {
setSearch({ ...search, scheme_name: value });
} else {
setSearch({ ...search, scheme_name: "" });
}
}}
renderInput={(params) => (
<TextField
{...params}
label="Scheme Name"
name="scheme_name"
// margin="normal"
variant="outlined"
size="small"
InputProps={{
...params.InputProps,
type: "search",
}}
/>
)}
/>