使用useEffect时API持续无限次调用的问题求助

大家好，我最近碰到一个棘手的问题：用useEffect调用REST API时，它一直在无限循环调用接口停不下来。其中user是从createContext里获取到的。

下面是我的代码片段：

useEffect(() => {
    const fetchData = async () => {
      try {
        const recievedUser = await Apis.getUser(user);
        setProfile(recievedUser.data);
        if (recievedUser.data) {
          // console.log(imageUrl)
          fetchImage();
        }
      } catch (error) {
        console.log(error.response);
      }
    };

    const fetchImage = async () => {
      try {
        const response = await Apis.getUserImage(user);
        setImageUrl(URL.createObjectURL(response.data));
      } catch (error) {
        console.log(error);
      }
    };

    fetchData();
  }, [user, imageUrl]);

问题原因分析 #

你这个无限循环的根源在useEffect的依赖数组里——你把imageUrl加进去了。在fetchImage函数里，你调用setImageUrl更新了这个状态，每次imageUrl变化，useEffect的依赖就会触发更新，导致整个effect重新执行，进而再次调用fetchData和fetchImage，又一次更新imageUrl，就这样形成了无限循环。

解决方案 #

把imageUrl从useEffect的依赖数组里移除就好啦！fetchImage是在fetchData内部触发的，它依赖的user已经在依赖数组里了，只有当user变化时才需要重新执行整个请求逻辑，这才是你真正需要的触发条件。

修改后的代码如下：

useEffect(() => {
    const fetchData = async () => {
      try {
        const recievedUser = await Apis.getUser(user);
        setProfile(recievedUser.data);
        if (recievedUser.data) {
          // console.log(imageUrl)
          fetchImage();
        }
      } catch (error) {
        console.log(error.response);
      }
    };

    const fetchImage = async () => {
      try {
        const response = await Apis.getUserImage(user);
        setImageUrl(URL.createObjectURL(response.data));
      } catch (error) {
        console.log(error);
      }
    };

    fetchData();
  }, [user]); // 移除imageUrl依赖

这样调整后，只有当user发生变化时才会触发API调用，不会再出现无限循环的问题了~

备注：内容来源于stack exchange，提问作者Abhishek Kumar