在数据渲染完成之前,加了一个loading,在页面渲染完成之后关闭, 但是发现,页面还没有完成渲染,loading就关闭了,不知道为什么?

问题遇到的现象和发生背景

在数据渲染完成之前,加了一个loading,在页面渲染完成之后关闭, 但是发现,页面还没有完成渲染,loading就关闭了

问题相关代码,请勿粘贴截图
 useEffect(() => {
    setSpinning(true);
    setTimeout(() => {
      setCheckedKeys(['1']);
      setSpinning(false);
    }, 5000);
  }, [props.updateModalVisible]);
我的解答思路和尝试过的方法

个人分析是因为,setCheckedKeys(['1']);渲染时间大于 setSpinning(false);,所以会出现这种情况,但是有没有一种方法,在,setCheckedKeys(['1']) 渲染完成之后, 在调用 setSpinning(false);

我想要达到的结果

页面完成渲染之后在 关闭loading, 有没有类似vue中nextick方法

img

你这 设置的定时器 5秒 ,你请求 加渲染 超过 5s 肯定 就是先显示 loading 。
你应该 判断 数据 获取到之后 或者 渲染 完成的 契机 用这个 判断

也可以不用定时器,拿到数据,判断数据不为空就可隐藏loading了

请求完loading false就可以了, 设置定时器的都是耍流氓