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。