returns 承诺的函数,这是承诺解决后要使用的选项集
Function that returns a promise, which is the set of options to be used once the promise resolves
在我的代码中,loadOptions 给出了以下错误消息“ returns 一个承诺的函数,它是承诺解决后要使用的选项集。”但我已经在代码中做了一些尝试但没有成功。谁能帮我理解 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)}
/>
The docs 说
The loadOptions
prop allows users to either resolve from a callback...
or resolve from a returned promise....
…但不是同时。如果您使用的 async function
是 returns 承诺,请通过 return
ing 值来解决带有选项的承诺。不接受回调:
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;
// ^^^^^^
};
在我的代码中,loadOptions 给出了以下错误消息“ returns 一个承诺的函数,它是承诺解决后要使用的选项集。”但我已经在代码中做了一些尝试但没有成功。谁能帮我理解 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)}
/>
The docs 说
The
loadOptions
prop allows users to either resolve from a callback...or resolve from a returned promise....
…但不是同时。如果您使用的 async function
是 returns 承诺,请通过 return
ing 值来解决带有选项的承诺。不接受回调:
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;
// ^^^^^^
};