僅在獲取數據時加載狀態

Question

我試圖在僅獲取數據時顯示加載程序，而不是着陸到頁面上以及獲取數據時首先顯示加載器...有什么想法嗎？

這是我目前正在做的

const handleSearchClick = async () => {
            setItems([]);
            setIsActive(true);

            const { data: { items } } = await fetchData(
                `${process.env.REACT_APP_URL}${page}`,
            );
            items.length && setIsActive(false);
            setPage(1);
            setItems(items);
};


<container>
    <SearchBarContainer>
           <SearchBar
               onClickButton={handleSearchClick}
               onValueChange={handleChange}
               value={value}
               pageNum={page}
            />
    </SearchBarContainer>
    {!isActive ? (/*Display data*/) : 
    (
        <LoaderContainer>
            <RingLoader size={100} />
        </LoaderContainer>
     )}
</container>

Answer 1

您需要在獲取數據之前和之后設置加載狀態。

 const App = props => { const [loading, setLoading] = useState(false); const [items, setItems] = useState([]); const handleSearchClick = async () => { setLoading(true); try { const { data: { items: newItems } } = await fetchData( `${process.env.REACT_APP_URL}${page}`, ); setItems(newItems); } catch(e) { console.log('Error', e); } finally { setLoading(false); } }; return ( <container> <SearchBarContainer> <SearchBar onClickButton={handleSearchClick} onValueChange={handleChange} value={value} pageNum={page} /> </SearchBarContainer> {loading ? ( <LoaderContainer> <RingLoader size={100} /> </LoaderContainer> ) : ( <div>Your data</div> ); } </container> ); }