获取所有数据后如何隐藏 Spinner Loader - ReactJS答案

【问题标题】：How can I hide Spinner Loader after all data is fetched - ReactJS获取所有数据后如何隐藏 Spinner Loader - ReactJS
【发布时间】：2022-11-14 10:34:35
【问题描述】：

从 API 获取所有数据后，如何隐藏加载微调器？我有一个输出分页数据的 laravel api。我正在使用 reactjs 显示带有滚动事件的数据。现在我想在获取所有数据后隐藏微调器。或添加类似No more data

这是我的代码

function Training() {
let navigate = useNavigate();
const [fruits, setFruits] = useState([]);
const [limit, setLimit] = useState(6);
const [isLoading, setIsLoading] = useState(true);
const [loading, setLoading] = useState(false);

useEffect(() => {

    let isMounted = true;

    axios.get(`/api/fruits?page=1&limit=` + limit).then(res => {
        if (isMounted) {
            if (res.data.status === 200) {
                setFruits(res.data.fruit);
                setIsLoading(false);
                setLoading(false);
                console.warn(res.data.fruit.length)
            }
        }
    });
    return () => {
        isMounted = false
    };
}, [limit]);

useEffect(() => {

    const handleScroll = (e) => {
        const scrollHeight = e.target.documentElement.scrollHeight
        const currentHeight = e.target.documentElement.scrollTop + window.innerHeight
        if (currentHeight + 1 >= scrollHeight) {
            setLoading(true);
            setLimit(limit + 4)
        }
    }
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
}, [limit])

显示数据和加载微调器

<div className="section">

                <div className="row">
                    {isLoading && <WidgetSkeleton cards={6} />}

                    {fruits.map((fruit) => (
                        <FruitWidget fruit={fruit} key={fruit.id} />
                    ))}

                </div>
                {loading ? <><span className="spinner-border spinner-center text-primary mb-5" role="status" aria-hidden="true"></span></> : ''}

            </div>

请帮忙。谢谢

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

您可以检查 res.data.fruit.length 是否小于您的限制。然后我们知道没有更多的项目要获取。

【讨论】：

【解决方案2】：

在你的代码中您正在打开 setLoading 到 true 并隐藏您需要的旋转加载程序 setLoading(false) 您正在执行的操作，

问题是您仅在收到数据时才将 setloading 设置为 false，您应该改为这样做。

axios
  .get(`/api/fruits?page=1&limit=` + limit)
  .then((res) => {
    if (isMounted) {
      if (res.data.status === 200) {
        setFruits(res.data.fruit);
        console.warn(res.data.fruit.length);
      }
    }
  })
  .catch((err) => console.log(err))
  .finally(() => {
    setIsLoading(false);
    setLoading(false);
  });

【讨论】：