如何在Typescript中使用isMilti实现AsynSelect#react select

Question

我似乎无法让isMulti使用Aysync select。我尝试了很多次迭代，但都不起作用。下面是我的代码。一旦我取消对isMulti行的注释，事情就会破裂。我试图创建一个新的数组类型，看看这是否有帮助，但没有。

我还有另一个问题，选项框不会从promise函数加载选项，而是只有当我从输入中删除一个字符时才会加载(此时它使用缓存的结果填充下拉列表(。

import { useState } from 'react';
import { FunctionComponent } from 'react';
import AsyncSelect from 'react-select/async';
import ValueType from 'react-select';
import { getGoogleAutoComplete } from './services';
import map from '../../assets/map.svg';
import './LocationInput.styles.scss';

type OptionType = {
value: string;
label: string;
}
type OptionTypeArray = Array<OptionType>;

const LocationInput: FunctionComponent = () => {

const [locations, setLocations] = useState<ValueType<OptionType | OptionTypeArray>>();
const [query, setQuery] = useState("");
const handleChange = (option: ValueType<OptionType | OptionTypeArray> | null) => {
if (option != null){setLocations(option)};
console.log('im in handleChange!')
console.log(option)
};
async function promiseOptions(): Promise<any>{
return await getGoogleAutoComplete(query);
}

return (
<div className='location-input-container'>
<div className='map-icon'>
<img src={map} alt=''/>
</div>
<div className='location-input'>
<AsyncSelect
//isMulti={true}
cacheOptions
value={locations}
defaultOptions
placeholder='Enter a City or ZIP code'
onChange={(option) => handleChange(option)}
onInputChange={(value) => setQuery(value)}
closeMenuOnSelect={true}
noOptionsMessage={() => 'No Match Found'}
isClearable={true}
loadOptions={promiseOptions} />
</div>
</div>
)
}
export default LocationInput;

Answer 1

我找到了一个解决方案。然而，我不得不使用类型断言来锻炼它，这不是理想的方法。如果有人有任何其他建议，我会非常感激。

import { useState, FunctionComponent } from 'react';
import AsyncSelect from 'react-select/async';
import { getGoogleAutoComplete } from './services';
import OptionTypeBase from 'react-select';
import { OptionsType } from 'react-select/src/types';
import makeAnimated from "react-select/animated";
import map from '../../assets/map.svg';
import './LocationInput.styles.scss';


const LocationInput: FunctionComponent = () => {

const [locations, setLocations] = useState<OptionsType<OptionTypeBase>>();
const [query, setQuery] = useState("");
const handleChange = (option: OptionsType<OptionTypeBase>) => {
setLocations(option);
console.log('im in handleChange!')
console.log(option)
};
async function promiseOptions(value:string): Promise<any>{
return new Promise(resolve => resolve(getGoogleAutoComplete(value)));
}
//get animated components wrapper
const animatedComponents = makeAnimated();

return (
<div className='location-input-container'>
<div className='map-icon'>
<img src={map} alt=''/>
</div>
<div className='location-input'>
<AsyncSelect
isMulti={true}
components={animatedComponents}
cacheOptions
placeholder='Enter a City or ZIP code'
onChange={(option) => handleChange(option as OptionsType<OptionTypeBase>)}
closeMenuOnSelect={true}
noOptionsMessage={() => 'No Match Found'}
loadOptions={promiseOptions} />
</div>
</div>
)
}
export default LocationInput;