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

Question

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

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

问题相关代码，请勿粘贴截图

 useEffect(() => {
    setSpinning(true);
    setTimeout(() => {
      setCheckedKeys(['1']);
      setSpinning(false);
    }, 5000);
  }, [props.updateModalVisible]);

我的解答思路和尝试过的方法

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

我想要达到的结果

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

Answer 1

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