我希望使用我自己的对后端的自定义调用来创建一个自动完成搜索栏,该搜索栏会搜索股票列表。
<Autocomplete
multiple
id="checkboxes-tags-demo"
options={watchlistSearchTickers}
disableCloseOnSelect
getOptionLabel={(option: any) => (option!) ? option.Symbol : null}
renderOption={(props, option, { selected }) => (
<li {...props}>
{option.Symbol}
</li>
)}
style={{ padding: 0 }}
onChange={(event, query: any) => handleWatchlistSearch(query)}
filterOptions={(x) => x}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input type="text" {...params.inputProps} />
</div>
)}
/>
Run Code Online (Sandbox Code Playgroud)
这里的初始渲染看起来不错,但是单击文本输入框时,会发生错误"options.filter" is not a function。下面是通过post请求调用后端的函数:
const [watchlistSearchTickers, setWatchlistSearchTickers] = useState<Array<watchlistSearchInterface>>([])
function handleWatchlistSearch(query: string) {
axiosInstance.post("/portfolio/watchlist/search/", {
query: query
}).then((res) => {
console.log(res)
setWatchlistSearchTickers(res.data)
})
}
useEffect(() => { …Run Code Online (Sandbox Code Playgroud)