未处理的拒绝（TypeError）：回调不是函数答案

【问题标题】：Unhandled Rejection (TypeError): callback is not a function未处理的拒绝（TypeError）：回调不是函数
【发布时间】：2022-01-12 03:47:13
【问题描述】：

我一直在尝试使用来自 https://react-select.com/async#loading-asynchronously 的回调来实现 AsyncSelect 元素，方法是将参数传递给 loadOptions 函数以使用 api 填充适当的字段。

    const fetchData = async (url, parameter) => {
        let json;
        const data = {
            parameter
        };
        await axios
            .post(url, data)
            .then((response) => {
                json = response.data;
            })
            .catch((error) => {
                console.log('Error ');
                json = defaultOptions;
            })
            .finally(() => {
                console.log('end');
            });
        return json;
    };
    // check if can be replaced with one function with parsing parameters
    const loadData = (
        inputValue: string,
        callback: (options: defaultOptions) => void // Here is error Unhandled Rejection (TypeError): callback is not a function
    ) => {
        setTimeout(async () => {
            callback(
                await fetchData(
                    'http://127.0.0.1:8000/api/endpoint',
                    inputValue
                )
            );
        }, 1000);
    };

这里是返回 div

<AsyncSelect
   loadOptions={loadData('Parameter I want to pass')}
   defaultOptions
   onChange={(e) => setLicensee(e.value)}
/>

API 响应很好，我看到我得到了正确的字段响应。此外，来自控制台的错误可能会有所帮助：Uncaught (in promise) TypeError: callback is not a function.

提前致谢！

【问题讨论】：

标签： reactjs asynchronous callback

【解决方案1】：

你有loadOptions={loadData('Parameter I want to pass')} 但loadData 要求你同时传递一个字符串和一个有效的函数。由于没有有效的函数，它会引发错误。所以你想要类似的东西

const validCallback = (options: defaultOptions) => {
    console.log("Hi, I'm a valid callback here were your options: " + defaultOptions); // Assuming defaultOptions type can be displayed
}
<AsyncSelect
   loadOptions={loadData('Parameter I want to pass', validCallback)}
   defaultOptions
   onChange={(e) => setLicensee(e.value)}
/>

【讨论】：