React调用useFirestore取数时空数组显示无结果而非加载态如何实现

核心原因 #

你当前的逻辑没有区分「数据加载中」和「数据加载完成但为空」两种状态，只要docs长度为0就统一显示骨架屏，自然会出现空数据时依然展示加载动画的问题。

修改步骤 #

1. 从useFirestore钩子中取出加载状态
   这类Firestore封装钩子默认会返回加载状态字段，通常为loading/isLoading，你可以先查看../../hooks/useFirestore的导出字段确认，这里我们以loading为例。
2. 调整三层判断逻辑
   将原来的两层判断（有数据/无数据）调整为三层：

• 加载中：展示骨架屏
• 加载完成且有数据：展示对应内容卡片
• 加载完成且无数据：展示空提示

修改后的完整代码 #

import React, { useState } from "react"
import useFirestore from "../../hooks/useFirestore"
import ChallengeCard from "../challenges/ChallengeCard"
import SolutionSummary from "../solutions/SolutionSummary"
import SkeletonCard from "../skeletons/SkeletonCard"

const Tabs = ({ userID }) => {
  const [openTab, setOpenTab] = useState(1)
  // 新增取出loading状态
  const { docs = [], loading = false } = useFirestore("solutions", null, userID, openTab)
  return (
    <>
      <div className="flex flex-wrap">
        <div className="w-full">
          <ul className="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row" role="tablist">
            <li className="-mb-px xs:mb-4 sm:mr-2 last:mr-0 flex-auto text-center">
              <a
                className={
                  "text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal " +
                  (openTab === 1
                    ? "text-white bg-gradient-to-br from-purple-500 to-indigo-500"
                    : "text-purple-500 bg-white")
                }
                onClick={(e) => {
                  e.preventDefault()
                  setOpenTab(1)
                }}
                data-toggle="tab"
                href="#link1"
                role="tablist"
              >
                <i className="fas fa-rocket text-base mr-1"></i> In-Progress Projects
              </a>
            </li>
            <li className="-mb-px last:mr-0 flex-auto text-center">
              <a
                className={
                  "text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal " +
                  (openTab === 2
                    ? "text-white bg-gradient-to-br from-purple-500 to-indigo-500"
                    : "text-purple-500 bg-white")
                }
                onClick={(e) => {
                  e.preventDefault()
                  setOpenTab(2)
                }}
                data-toggle="tab"
                href="#link2"
                role="tablist"
              >
                <i className="fas fa-briefcase text-base mr-1"></i> Completed Projects
              </a>
            </li>
          </ul>
          <div className="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded">
            <div className="px-4 py-5 flex-auto">
              <div className="tab-content tab-space">
                <div className={openTab === 1 ? "block" : "hidden"} id="link1">
                  <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5 justify-items-center items-center">
                    {/* 三层判断逻辑 */}
                    {loading ? (
                      [1, 2, 3, 4, 5, 6].map((n) => <SkeletonCard key={n} />)
                    ) : docs.length ? (
                      docs.map((challenge) => {
                        return (
                          <ChallengeCard
                            key={challenge.id}
                            challenge={challenge}
                            btnTitle="Submit Solution"
                          />
                        )
                      })
                    ) : (
                      <p className="col-span-full text-gray-500 text-center py-10">no solution found</p>
                    )}
                  </div>
                </div>
                <div className={openTab === 2 ? "block" : "hidden"} id="link2">
                  <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5 justify-items-center">
                    {/* 三层判断逻辑 */}
                    {loading ? (
                      [1, 2, 3, 4, 5, 6].map((n) => <SkeletonCard key={n} />)
                    ) : docs.length ? (
                      docs.map((solution) => {
                        return <SolutionSummary key={solution.id} solution={solution} />
                      })
                    ) : (
                      <p className="col-span-full text-gray-500 text-center py-10">no solution found</p>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}

export default Tabs

注意事项 #

如果你的useFirestore钩子返回的加载状态字段名不是loading，替换成对应字段名即可，比如isLoading、pending都可以。

内容的提问来源于stack exchange，提问作者r121