reactjs - React-Select：当我输入 Select 时，“无法读取未定义的属性‘替换’”

Question

我正在实现 React-Select Async。根据他们的文档，我的代码是正确的。然而，onInputChange 会在我输入内容后立即抛出错误“无法读取未定义的属性'替换'”。如何解决这个问题？

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)}
        />
    </>
  );
}

标签： reactjsreact-select

Answer 1

当onInputChange事件被触发时，handleInputChange函数通过输入值传递react-select。所以你不需要手动传递值。

所以改变

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

至

onInputChange={handleInputChange}

您还需要将isAsyncprop 设置为 true