如何在useEffect执行前处理未定义的错误？

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

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    if (data === null) {
      console.log('Data is not defined yet');
      return;
    }

    // 执行副作用操作
    console.log('Data is defined:', data);
  }, [data]);

  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
    </div>
  );
};

export default MyComponent;