在运行函数之前，如何等待变量初始化？(React)

function MyComponent() {
  const [myVariable, setMyVariable] = useState(null);

  useEffect(() => {
    // 模拟一个异步操作，例如从服务器获取数据并初始化变量
    setTimeout(() => {
      setMyVariable("Initialized value");
    }, 2000);
  }, []);

  return (
    <div>
      {myVariable ? (
        // 变量已经初始化，显示需要等待的内容
        <div>需要等待的内容</div>
      ) : (
        // 变量未初始化，显示加载中的提示
        <div>加载中...</div>
      )}
    </div>
  );
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myVariable: null,
    };
  }

  componentDidMount() {
    // 模拟一个异步操作，例如从服务器获取数据并初始化变量
    setTimeout(() => {
      this.setState({ myVariable: "Initialized value" });
    }, 2000);
  }

  render() {
    const { myVariable } = this.state;

    return (
      <div>
        {myVariable ? (
          // 变量已经初始化，显示需要等待的内容
          <div>需要等待的内容</div>
        ) : (
          // 变量未初始化，显示加载中的提示
          <div>加载中...</div>
        )}
      </div>
    );
  }
}