React MUI 自动完成“options.filter”不是一个函数

Question

我希望使用我自己的对后端的自定义调用来创建一个自动完成搜索栏，该搜索栏会搜索股票列表。

<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>
                )}
            />

这里的初始渲染看起来不错，但是单击文本输入框时，会发生错误"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(() => {
        handleWatchlistSearch("")
    }, []) // Initialize with empty list of tickers

有谁知道为什么会发生这种情况？

Answer 1

因此，当您将null或undefined值传递到options自动完成组件的 prop 中时，实际上会发生此错误。发生这种情况的原因可能是您“太快”地单击“自动完成”，因此在它从 API 调用获取结果之前，它会传递组件尝试传递给.filter()它的值，从而导致错误。

我也遇到了这个问题，并且我设法找到了一种可行的解决方法（它并不完美，但它可以阻止您的代码崩溃）。

<Autocomplete
            multiple
            id="checkboxes-tags-demo"
            options={!watchlistSearchTickers ? [{label:"Loading...", id:0}] : watchlistSearchTickers }
(...)

有了这个三元组，我们所做的是，当您的 API 处理您的请求时，它会放置一个占位符“正在加载...”选项，这样它就不会导致您的代码崩溃（类似于 Load on open prop，但我从来没有想过如何使其发挥作用）。

对我来说，上面的解决方案效果很好，但最奇特和最好的选择是来自 MUI 的Load道具。

希望我能帮忙！

编辑：实际上，如果您可以将选项初始化为空数组[]，则可以将loading属性设置为true，这将在内容加载时显示加载！