React Hook 設置 state 在 useEffect 與 state 在依賴數組

Question

我有一個關於在 React Hooks 中正確使用 useEffect 和 setState 的問題。

這是我的反應應用程序，它根據如下配置獲取持久配置和一些其他數據：

function App() {
    const [config, setConfig] = useState(null);
    // some other states 

    useEffect(() => {
        const fetchData = () => {
            axios.get("/path/to/config").then(response => {
                if (response.status === 200) {
                    return response.data
                }
            })
                .then(data => {
                    setConfig(data.config);
                    // set some other states
                })
                .catch(error => {
                    console.log("Error:" + error);
                })
        }
        fetchData();
    }, [config]);

    return (
        <div >
            ...
        </div>
    );
}

如果我運行這個應用程序 useEffect 立即調用兩次，第一次渲染，然后第二次，因為setConfig(data.config); 在 axios 中調用得到成功 function。

用戶可以更改在另一個請求中完成的自己的配置。 如果他確實想要在 state 配置更改后通過此 useEffect function 重新加載配置和一些其他取決於配置的數據。

現在，由於反應鈎子中沒有 setstate 回調，我在某處讀到我應該使用 useEffect 和依賴數組中的 state 變量。

如何防止我的 useEffect 在開始時被調用兩次？

我有一種感覺，我做錯了。 先感謝您

Answer 1

您需要在 useEffect 中添加一個 if 條件，因為在第一次渲染時默認調用 useEffect。

useEffect(() => {
      if(config !== null){
        const fetchData = () => {
            axios.get("/path/to/config").then(response => {
                if (response.status === 200) {
                    return response.data
                }
            })
                .then(data => {
                    setConfig(data.config);
                    // set some other states
                })
                .catch(error => {
                    console.log("Error:" + error);
                })
        }
        fetchData();
      }
    }, [config]);

Answer 2

這個不對。 我想這可以無限調用 fetchData。