我正在使用React从Firebase中检索数据，但是userItem没有在我的render函数中定义，这是为什么

class MyComponent extends React.Component {
  state = {
    userItem: null,
  };

  componentDidMount() {
    // 假设fetchUserData是一个从Firebase获取数据的函数
    fetchUserData().then((data) => {
      this.setState({ userItem: data });
    });
  }

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

    // 只有当userItem被定义时才渲染相关内容
    if (!userItem) {
      return <div>Loading...</div>;
    }

    return (
      <div>
        {/* 渲染userItem的内容 */}
        <h1>{userItem.title}</h1>
        <p>{userItem.description}</p>
      </div>
    );
  }
}

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

function MyComponent() {
  const [userItem, setUserItem] = useState(null);

  useEffect(() => {
    fetchUserData().then((data) => {
      setUserItem(data);
    });
  }, []); // 空数组作为第二个参数确保只在组件挂载时执行一次

  if (!userItem) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>{userItem.title}</h1>
      <p>{userItem.description}</p>
    </div>
  );
}

useEffect(() => {
  fetchUserData()
    .then((data) => {
      setUserItem(data);
    })
    .catch((error) => {
      console.error('Error fetching user data:', error);
    });
}, []);