在不成功的结果后有条件地呈现组件

Question

我之前的问题引导我来到这里，在成功地访问和使用了Mu-6 me之后，我现在看到并非所有的歌曲都有歌词。

因此，我得到了歌曲，但有些歌曲还没有发布他们的歌词，我想处理这个错误，我首先将歌词设置为setLyrics，然后检查其是否未定义，并使用旋转器加载，然后在获取返回结果时消失。

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

如何从状态数据中确定该值是否由于仍在加载而丢失，还是由于它不存在而丢失？这将是检查的条件。

如果目前无法推断该信息，则为其添加一个状态值。例如，您可以拥有如下内容：

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

在你的标记中：

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

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

不管您如何设计它，总体来说，主要的一点是，目前您有两种状态：

1. 值存在
2. 值不存在

但你需要三个州：

1. 值存在
2. 值不存在，因为在完成fetch

之后，它仍然是不存在的