当数组长度为 0 时显示'no solution found'

Question

我想在我的组件中有三个阶段。

1. 数据正在加载=>显示加载状态
2. 获取数据时=>显示数据
3. 当数据被获取，但它是一个空数组=>显示"no solution found">

我已经实现了前两个，但是实现第三个有问题。现在，它显示加载动画时，数组的长度为0，但我想显示'没有解决方案发现'时，没有数据存在于数据库。

Github Repo: https://github.com/rishipurwar1/coding-space

src/components/smallComponents/Tabs.js组件代码:

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)
const { docs = [] } = 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">
{docs.length
? docs.map((challenge) => {
return (
<ChallengeCard
key={challenge.id}
challenge={challenge}
btnTitle="Submit Solution"
/>
)
})
: [1, 2, 3, 4, 5, 6].map((n) => <SkeletonCard key={n} />)}
</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">
{docs.length
? docs.map((solution) => {
return <SolutionSummary key={solution.id} solution={solution} />
})
: [1, 2, 3, 4, 5, 6].map((n) => <SkeletonCard key={n} />)}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}
export default Tabs

Answer 1

你有3个阶段，在3个阶段当数据被获取，但它是一个空数组然后检查变量(docs)的长度，如果它是0，那么它就是一个空数组在React中，你可以这样做

{!docs.length && (<div>no solution found</div>)}

所以上面的代码检查是否docs.length如果为0，则为真，并且不显示找到的解决方案。