如何处理在设置变量之前引用变量的useEffect问题

import React, { useEffect, useRef } from 'react';

const MyComponent = () => {
  const myVar = useRef(null);

  useEffect(() => {
    // 在这里可以安全地引用myVar.current
    console.log(myVar.current);
  }, []);

  // 在设置myVar之前引用myVar不会导致问题
  myVar.current = 'Hello World';

  return <div>My Component</div>;
};

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [myVar, setMyVar] = useState(null);

  useEffect(() => {
    // 在这里可以安全地引用myVar
    console.log(myVar);
  }, [myVar]);

  // 在设置myVar之前引用myVar不会导致问题
  setMyVar('Hello World');

  return <div>My Component</div>;
};

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [myVar, setMyVar] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      // 异步获取数据
      const data = await fetch('https://api.example.com/data');
      const result = await data.json();

      // 设置变量
      setMyVar(result);
    };

    fetchData();
  }, []);

  // 在设置myVar之前引用myVar不会导致问题
  console.log(myVar);

  return <div>My Component</div>;
};