应该在什么时机获取内容区域的宽度

[xiaochena]

// .umirc.ts
import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  layout: {},
  routes: [
    {
      name: 'index',
      path: '/',
      component: '@/pages/index',
    },
  ],
  fastRefresh: {},
});

import { useEffect } from 'react';
import styles from './index.less';

export default function IndexPage() {
  useEffect(() => {
    const main = document.getElementsByTagName('main')[0];

    const { clientWidth } = main;
    console.log(clientWidth, 'clientWidth');
  }, []);

  return (
    <div>
      <h1 className={styles.title}>Page index</h1>
    </div>
  );
}

这是一段非常简单的代码、在使用 layout 模式下、初始化的时候获取 <main />的宽度、但是我发现第一次进入页面的时候获取的宽度是错误的

main 的宽度应该是 938 而 1194是当前的视图像素。似乎 main 一开始就存在、菜单是后续渲染出来的、挤压了 main 的宽度

必须是刷新的第一次进入界面才能复现