react isLoading 状态行为不正确

Question

我试图在 isLoading 状态为 true 时制作骨架加载效果（在 init 上设置为 true），就像这样 =>

{isLoading  ? (
            <div className="grid grid-cols-4 gap-3">
              {voiceData.voices.map((voice) => (
                <Skeleton key={voice.voice_id} className="w-[200px] h-[250px] rounded-md" />
              ))}
          </div>
          ) : <div id="dash-card-container" className="grid grid-cols-4 gap-3" >
                {voiceData.voices.map((voice) => (
                  <VoiceCard onClick={() => {
                    // Store the voice object in localStorage
                    localStorage.setItem("voice", JSON.stringify(voice));
                    console.log(localStorage.getItem("voice"));
                    // Navigate to the editor route
                    navigate("/create/editor");
                  }} key={voice.voice_id} img={voice.img} name={voice.name} category={voice.category} />
                ))}
            </div>
    }

但是由于某种原因，当我重新加载页面时它不起作用，这是我调用 api 的 useEffect

// Fetching voices from api
  useEffect(() => {
    const fetchVoices = async () => {
      // async function to fetch voices
      try {
        setIsLoading(true);

        const response = await axios.get("http://localhost:3000/voices");
        const data = response.data;
        
        console.log("data:", data);
        setVoiceData(data);
        console.log("Voicedata fetched:", voiceData)
      } catch (error) {
        console.error("Error fetching voices", error)
        setIsLoading(false)
      } finally {
        setIsLoading(false);
      }
    };
    fetchVoices();
  }, []); 

我尝试删除“finally”块，但这也没有成功

useEffect(() => {
    const fetchVoices = async () => {
      // async function to fetch voices
      try {
        setIsLoading(true);

        const response = await axios.get("http://localhost:3000/voices");
        const data = response.data;
        
        console.log("data:", data);
        setVoiceData(data);
        console.log("Voicedata fetched:", voiceData)
        setIsLoading(false)
      } catch (error) {
        console.error("Error fetching voices", error)
        setIsLoading(false)
      } 
    };
    fetchVoices();
  }, []);

我知道我的加载效果正在起作用，因为如果我从未设置 setIsLoading => false 它就会出现。

我还尝试了 console.logging 在 try 块的开头将其设置为 true ，在最后将其设置为 false ，并且每次都是相同的值，无论是 true 还是 false，但这没有对渲染的影响我觉得很奇怪。

我对此有点陌生，但我不认为我错过了任何重要的事情。任何帮助将不胜感激，因为我已经撞了我的头有一段时间了。

Answer 1

您可以将

fetchVoices

移动到

useEffect

之外。另外，在改变

isLoading

之前检查您的 API 请求是否成功：

const fetchVoices = async () => {
      setIsLoading(true);
      // async function to fetch voices
      try {
        const response = await axios.get("http://localhost:3000/voices");
        const data = response.data;

        if(data) setIsLoading(false);
        console.log("data:", data);
        setVoiceData(data);
        
        console.log("Voicedata fetched:", voiceData)
      } catch (error) {
        console.error("Error fetching voices", error)
        setIsLoading(false)
      } 
    };

useEffect(() => {
    fetchVoices();
  }, [fetchVoices]);