仅在获取数据时加载状态

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

}