React-Select: «Невозможно прочесть свойство 'replace' of undefined», когда я набираю Select

Question

Я использую React-Select Asyn c. Согласно их документации, мой код правильный. Тем не менее, onInputChange выдает ошибку «Невозможно прочитать свойство 'replace' of undefined» каждый раз, как только я что-то набираю. Как это исправить?

const options=[
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]
export default function App() {
const [query, setQuery] = useState('')
  const handleInputChange = (str) => {
    const inputValue = str.replace(/\W/g, '');
    setQuery(inputValue);
    return inputValue;
  };
  return (
    <>
     <AsyncSelect
          cacheOptions
          //loadOptions={loadOptions}
          defaultOptions={options}
          onInputChange={(e)=> handleInputChange(e.target.value)}
        />
    </>
  );
}

Answer 1

при срабатывании события onInputChange функции handleInputChange передается входное значение react-select. Так что вам не нужно передавать значение вручную.

Так что измените

onInputChange={(e)=> handleInputChange(e.target.value)}

на

onInputChange={handleInputChange}

Также вам нужно установить isAsync prop в true

Answer 2

onInputChange={(e)=> handleInputChange(ee.target.value)}. Вы указываете ee.target ... вместо e.target ...