CODEWITHSUNDEEP
reactjsasynchronouscallback
Nick
Nick

Reputation: 101

Unhandled Rejection (TypeError): callback is not a function

I've been trying to implement AsyncSelect element using callbacks from https://react-select.com/async#loading-asynchronously by passing parameters to loadOptions function to populate appropriate fields using 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);
    };

here is return div

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

The API response is fine, I see that I'm getting a proper response with fields. Also, an error from the console might be helpful: Uncaught (in promise) TypeError: callback is not a function.

Thanks in advance!

Upvotes: 1

Views: 552

Answers (1)

TrivialCase
TrivialCase

Reputation: 1099

You have loadOptions={loadData('Parameter I want to pass')} but loadData requires you to pass it both a string and a valid function. It throws an error because there is no valid function. So you want something like

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

Upvotes: 1

Related Questions