Блог

Кажется, я не могу заставить 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;
 

Я смог найти решение. Однако мне пришлось использовать утверждение типа, чтобы сделать его тренировкой, что не является идеальным подходом. Если у кого-нибудь есть какие-либо другие предложения, я бы с удовольствием их оценил.

 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;