在不成功的结果后有条件地渲染组件

Question

我之前的问题将我引到这里，在成功访问和使用 musixmatch API 之后，我现在看到并非所有歌曲都有歌词

所以我得到了歌曲，但它们是一些尚未发布歌词的歌曲，我想处理这个错误我首先将歌词设置为setLyrics ，然后检查它是否未定义并使用微调器加载然后消失当 fetch 返回结果时

return trackInfo ===undefined||lyrics===undefined ||Object.keys(trackInfo).length===0 
       ||Object.keys(lyrics).length===0 ? 
       <Spinner/>:<Songlyrics/>

但是如果资源永远不会出现，因为它不存在，微调器只是无限期地加载，我希望微调器加载几秒钟，但如果没有特定歌曲的歌词，则呈现一个告诉用户的组件资源不可用并重新路由到主页

我尝试使用 setTimeout 但现在即使歌词可用我仍然重新路由这告诉我我错过了一些东西，我还需要找出一种方法来呈现noLyrics消息组件

    return trackInfo ===undefined||lyrics===undefined ||Object.keys(trackInfo).length===0 ||Object.keys(lyrics).length===0 ? 
         <>
          <Spinner/>
          setTimeout(()=>{
            navigate('/')
},6000)
         </>
:<Songlyrics/>

有人能帮我吗？ 更多上下文

function Lyrics() {
    const [lyrics,setLyrics]=useState('')
    const [loading,setLoading]=useState(false)

    const navigate =useNavigate()
    // get request for lyrics by id
    useEffect(()=>{
         setLoading(true)
      fetch('getting lyrics')
      .then(res=>res.json())
      .then(data=>{
            // setLyric to the lyric body
             setLoading(false)
            setLyrics(data.message.body.lyrics.lyrics_body)
        })
    
    },[])
      
     

  return loading ? <Spinner/>:
  (trackInfo ===undefined||lyrics===undefined ||Object.keys(trackInfo).length===0 ||Object.keys(lyrics).length===0?<DoesNotExist/>
  :
  (
    <component/>
  )
)

}

Answer 1

您如何从 state 数据中确定该值是否因为仍在加载而丢失，或者该值是否因为它不存在而丢失？ 这将是检查的条件。

如果目前无法推断该信息，请为其添加 state 值。 例如，你可以有类似的东西：

const [isLoading, setIsLoading] = useState(true);

在您的标记中：

{
  isLoading ? <Spinner/> :
  (/* the rest of your logic, conditionally determining if the value exists or not */)
}

然后，您只需在启动或完成该操作的任何给定 API 调用时更新isLoading即可。 如果有多个同时调用，则需要多个值。 （也许每个 state 值，也许是当前正在加载的调用的数组，这真的取决于你。）

无论您如何设计它，总体而言，重点是目前您有两种状态：

1. 存在价值
2. 价值不存在

但是你需要三个状态：

1. 存在价值
2. 值不存在，因为它仍在获取中
3. 完成提取后值不存在