如何在没有输入文本时禁用 react-select 中的加载动画

Question

我正在使用 AsyncSelect 创建文本输入，使用 REST api 搜索文本并在 select 列表中显示结果。每件事都运行良好，但是当我第一次加载页面时，我看到了 AsyncSelect 的加载动画。我试图阻止这种情况，但如果输入中没有文本但我仍然看到动画，则返回 null。你有什么想法吗？

    import React, { useState } from 'react';
    import AsyncSelect from 'react-select/async';
    
    const MainBanner = () => {
        const [inputValue, setValue] = useState('');
        const [selectedValue, setSelectedValue] = useState(null);
    
        // handle input change event
        const handleInputChange = value => {
            setValue(value);
        };
    
        // handle selection
        const handleChange = value => {
            setSelectedValue(value);
        }
    
        // load options using API call
        const loadOptions = (inputValue) => {
            if (inputValue.length > 1) {
                return fetch(`http://localhost:3001/search/?name=${inputValue}`).then(res => res.json());
            } else {
                return null;
            }
        };
   return (
   <div className="form-group">
      <AsyncSelect className="form-control"
      cacheOptions
      defaultOptions
      value={selectedValue}
      getOptionLabel={e => e.name}
      getOptionValue={e => e.path}
      loadOptions={loadOptions}
      onInputChange={handleInputChange}
      onChange={handleChange}
      />
 </div>

Answer 1

您可以立即从回调中解析加载选项，而不是使用 promise 变体 return 并避免初始加载动画。

const loadOptions = async (inputValue, callback) => {
    if (inputValue.length > 1) {
        const data = await fetch(`http://localhost:3001/search/?name=${inputValue}`).then(res => res.json());
        callback(data);
    } else {
        callback(null);
    }
};

如何在没有输入文本时禁用 react-select 中的加载动画

How to disable the loading animation in react-select when there is no input text

reactjs

react-select

next.js