如何在加载 fetch 之前显示加载消息答案

【问题标题】：How to display loading message until fetch is loaded如何在加载 fetch 之前显示加载消息
【发布时间】：2021-06-12 19:37:49
【问题描述】：

所以我有一个从 API 加载的项目列表。如果没有项目，我应该会看到一条消息，指出当前没有可用的项目。现在问题是，此消息显示一两秒钟，而项目正在加载。所以我的问题是：我如何展示例如。 “正在加载项目...”而不是其他消息，直到我的所有项目都被呈现？

import React,{useState, useEffect} from "react";
import Item from '../components/Item'

function Deals() {
  const [items, setItems] = useState([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(async () => {
    const response = await fetch("https://gp-super-store-api.herokuapp.com/item/list")
    const data = await response.json()
    setItems(data.items)
    setIsLoading(false)
  }, [])

  const filter = items.filter((item) => item.isOnSale === true)

  if(filter.length === 0){
    return <h1>Sorry folks, nothing for sale today :(</h1>
  }
  
  return (
    <div>
      {items.filter((item) => item.isOnSale === true).map((item) => (
        <Item 
        name={item.name} 
        img={item.imageUrl} 
        price={"$" + item.price}
        onsale={item.isOnSale}
        starsNum={item.avgRating}
        stock={item.stockCount}
        id={item._id}
        />
      ))}
    </div>
  );
}

export default Deals;

【问题讨论】：

标签： javascript reactjs api async-await fetch

【解决方案1】：

您可以使用您设置的加载状态有条件地渲染。

import React,{useState, useEffect} from "react";
import Item from '../components/Item'

function Deals() {
  const [items, setItems] = useState([])
  const [isLoading, setIsLoading] = useState(true)

  useEffect(async () => {
    const response = await fetch("https://gp-super-store-api.herokuapp.com/item/list")
    const data = await response.json()
    setItems(data.items)
    setIsLoading(false)
  }, [])

  const filter = items.filter((item) => item.isOnSale === true)

  if(filter.length === 0){
    return <h1>Sorry folks, nothing for sale today :</h1>
  }
    return (
        <>
           { loading? "Loading items...":(
           <div>
              {items.filter((item) => item.isOnSale === true).map((item) => (
                <Item 
                name={item.name} 
                img={item.imageUrl} 
                price={"$" + item.price}
                onsale={item.isOnSale}
                starsNum={item.avgRating}
                stock={item.stockCount}
                id={item._id}
                />
              ))}
            </div> )}
         
            </>
          );
}
export default Deals;

【讨论】：