使用反應鈎子重新渲染問題

Question

學習 React Hooks，我正在開發一個測試應用程序。 我的應用程序從 API 加載數據，然后填充網格。 一塊kake。 當我嘗試顯示加載指示器時出現問題。 它進入重新渲染循環。 這是我所做的：

import React, { useState, useEffect } from 'react';

function MyComp(props) {
   const [loading, setLoading] = useState(false);
   const [info, setInfo] = useState(null);

   useEffect(() => {
      setLoading(!loading);

      const getData = response => {
         if (response.response) {
            setInfo(response.response);
         } else {
            console.log('there was an error');
         }
         setLoading(!loading);
      };

      fetch(URL, {})
        .then(resp => ({ getData({response: resp}))
        .catch(error => ({ getData({ error });
   }, []);

   return (
     <>
        {loading ? "Loading" : "Not Loading"}
     </>
   );
}

export default MyComp;

我在這里缺少什么？

Answer 1

您正在 useEffect 鈎子中設置加載。 更改狀態會導致應用程序重新渲染，這也是您在 useEffect 中無限執行的操作。 因此，一旦應用程序加載 useEffect 鈎子運行並更改加載，這再次導致應用程序重新渲染並且循環繼續。

import React, { useState, useEffect } from 'react';

function MyComp(props) {
   const [loading, setLoading] = useState(false);
   const [info, setInfo] = useState(null);

   useEffect(() => {
      setLoading(loading => !loading);

      const getData = response => {
         if (response) {
            setInfo(response);
         } else {
            console.log('there was an error');
         }
         setLoading(loading => !loading);
      };

      fetch(URL, {})
        .then(resp =>  getData( resp))
        .catch(error =>  getData(error));
   }, []);

   return (
     <>
        {loading ? "Loading" : "Not Loading"}
     </>
   );
}

export default MyComp;

Answer 2

經過一些“嘗試和錯誤”（我不得不承認）我找到了這個解決方案：

import React, { useState, useEffect } from 'react';

function MyComp(props) {
   const [loading, setLoading] = useState(false);
   const [info, setInfo] = useState(null);

   useEffect(() => {
      setLoading(false);
   }, [info]);

   function getData(response) {
      if (response.response) {
         setInfo(response.response);
      } else {
         console.log('there was an error');
      }
   }

   useEffect(() => {
      setLoading(true);

      fetch(URL, {})
        .then(resp => ({ getData({response: resp}))
        .catch(error => ({ getData({ error });
   }, []);

   return (
     <>
        {loading ? "Loading" : "Not Loading"}
     </>
   );
}

export default MyComp;

也許不是最好的或最漂亮的方式……但它對我有用。