函数组件内直接写接口调用导致死循环的问题

cat10month

于 2022-10-26 15:31:08 发布

阅读量128

点赞数

分类专栏：前端开发工程师文章标签：前端 javascript json

本文链接：https://blog.csdn.net/sunzhen15896/article/details/127533327

版权

前端开发工程师专栏收录该内容

42 篇文章 3 订阅

订阅专栏

const RenModal = (props) => {
    CameraInfoStore.queryCameraUrl(cameraCode)
      .then((data) => {
        if (data?.streamUrl) {
          trafficStore.setVideoUrl(data.Url);
        } else {
          message.warn("暂未查询到摄像头的信息");
        }
      })
      .catch((error) => {
        message.error(JSON.stringify(error));
      });
  
  ...render()
}

问题描述：直接在函数组件内写调用接口的方法，导致一直调用这个接口，出现请求数量巨大的问题
原因描述：函数组件相当于render函数，父组件更新就会导致子组件更新，如果调用了接口，接口会导致数据刷新，组件重新渲染，相当于render内又render，就会导致死循环
解决方法：接口调用写在useEffect内，通过条件进行渲染