Function that returns a promise, which is the set of options to be used once the promise resolves

Question

In my code loadOptions gives me the following error message " Function that returns a promise, which is the set of options to be used once the promise resolves." but I've already made some attempts in the code but without success. Can anyone help me understand this error presented in loadOptions ?

import { useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import AsyncSelect from 'react-select/async';
import { fetchLocalMapBox } from '../api';


const initialPosition = {
    lat: -22.7532328,
    lng: -43.4563604
}

type Place = {
    label?: string;
    value?: string;
    position: {

        lat: number;
        lng: number;
    };
}

function OrderLocation() {

    const [address, setAddress] = useState<Place>({
        position: initialPosition
    })
    
    const loadOptions = async (inputValue: string, callback: (places: Place[]) => void) => {
        const response = await fetchLocalMapBox(inputValue);
      
        const places = response.data.features.map((item: any) => {
          return ({
            label: item.place_name,
            value: item.place_name,
            position: {
              lat: item.center[1],
              lng: item.center[0]
            },
            place: item.place_name,
          });
        });
      
        callback(places);
      };

<div className="filter-container">
                    <AsyncSelect 
                        placeholder="Digite um endereço para entregar o pedido"
                        className="filter"
                        loadOptions={loadOptions}
                        onChange={value => handleChangeSelect (value as Place)}
                    />

What error are you facing? Is there a specific reason you wrap the result of `fetchLocalMapBox` in `Promise.resolve()`? You seem to mix the callback and promise pattern. What pattern does `AsyncSelect` expect? — MaartenDev, May 31 '22 at 20:40
"*it's forcing me to use a Promise*" - what is **it**? More specifically, what is `AsyncSelect`? — Bergi, May 31 '22 at 20:48
@bergi, I misunderstood. More AsyncSelect is an import I made of react-select/async — dlima, May 31 '22 at 21:08
@MaartenDev, this was tests I was doing, but I didn't remove it before asking the question. I made edits to the code for a better understanding. — dlima, May 31 '22 at 21:09

score 1 · Accepted Answer · answered May 31 '22 at 22:30

The docs say

The loadOptions prop allows users to either resolve from a callback...

or resolve from a returned promise....

…but not both at once. If you are using an async function which returns a promise, resolve the promise with the options by returning the value. Do not accept a callback:

const loadOptions = async (inputValue: string) => {
    const response = await fetchLocalMapBox(inputValue);
  
    const places = response.data.features.map((item: any) => ({
        label: item.place_name,
        value: item.place_name,
        position: {
            lat: item.center[1],
            lng: item.center[0]
        },
        place: item.place_name,
    }));
  
    return places;
//  ^^^^^^
};

Thanks a lot for the help ! Just what I did, I removed the callback and included a return typing the value. — dlima, May 31 '22 at 23:08

Function that returns a promise, which is the set of options to be used once the promise resolves

1 Answers1