react-js中搜索时如何显示微调器？答案

【问题标题】：How to show a spinner while the search is going on in react js?react-js中搜索时如何显示微调器？
【发布时间】：2021-11-03 11:59:38
【问题描述】：

我正在尝试制作一个 Spinner，它将在搜索进行时显示并在搜索结果显示在页面中时隐藏。正确的做法是什么？这是我的代码：

const [isSearching, setIsSearching] = useState(false);

function search (e) {
    e.preventDefault();
    setIsSearching(true);
    setSearchValue(e.target.value);
    setSearchString(e.target.value);
    setIsSearching(false);
    if (e.target.value === "") {
        reset();
    }
}

<Input onChange={e => search(e)} value={searchValue} />

<Spinner style={{ display: isSearching ? 'block': 'none' }} />

【问题讨论】：

你有一些 API 获取正在进行吗？还是只想在用户输入时显示旋转？

标签： reactjs reactstrap

【解决方案1】：

const [isSearching, setIsSearching] = useState(false);

function search (e) {
    e.preventDefault();
    setIsSearching(true);
    setSearchValue(e.target.value);
    setSearchString(e.target.value);
    setIsSearching(false);
    if (e.target.value === "") {
        reset();
    }
}

return isSearching ? (
    <Spinner style={{ display: isSearching ? 'block': 'none' }} />
) : (
    <Input onChange={e => search(e)} value={searchValue} />
)

【讨论】：

【解决方案2】：

您可以在搜索时显示 Spinner 组件。

{ isSearching ? <Spinner /> : null }

【讨论】：

【解决方案3】：

我可以帮你解决这个问题。让我们看看你需要做什么：

创建两个状态，1. 保存搜索结果，2. 检测加载。

const [searchResult, setSearch] = useState("")
const [isLoading, setLoading] = useState(false)

现在，在你的 JSX 中，创建一个条件，如果内容正在加载，则显示微调器，否则显示结果：

<div>
   { isLoading? <Spinner />:<div>{{ searchResult }}</div> }
</div>

然后，在您的搜索处理程序中，这将是异步的：

async function search(e) {
   e.preventDefault()
   setLoading(true)
   //fetch the data and parse it
     .then(data => { setSearch(data); setLoading(false) })
}

就是这样

【讨论】：