我在React应用程序中呈现一些数据时遇到了问题。我有一个页面/users，它呈现了一个用户列表，单击某个特定用户会将客户端转到一个包含该用户/users/:id更多信息的页面。该页面有一个包含用户数据的组件，该数据是从本地JSON文件中获取的。问题是，当我从/users页面单击其中一个用户时，该特定用户的页面断开。控制台告诉我userData未定义。
我尝试过在获取数据后呈现特定的用户页面，但我认为我做得不正确。我尝试过用useState设置isLoading状态，并根据获取的数据状态有条件地呈现组件，但我仍然没有太多运气。下面是用户页面和UserInfo组件。

• • 用户页面**

function User() {
  const [userData, setUserData] = useState([]);

  const { id } = useParams();

  const fetchData = async () => {
    const response = await fetch(`../data/userData/${id}.json`);
    const data = await response.json();
    setUserData(data);
  };

  useEffect(() => {
    fetchData;
  }, []);

  return (
    <div>
      {userData ? (
        <UserInfo userData={userData} />
      ) : (
        <>
          <h1>Loading...</h1>
        </>
      )}
    </div>
  );
}

• • 用户信息组件**

function UserInfo({ userData }) {

  return (
  
      <div className='userInfo__details'>
          <div className='userInfo__name'>
            <h1>{userData[0].name}</h1>
          </div>
       </div>

  );
}

页面在userData被fetch请求检索之前呈现，这会导致页面中断。理想情况下，我希望在检索数据时有一个加载微调器或其他东西，但每当我能够让else条件呈现来指示数据仍在被提取时，它就挂在那里，永远不会使用提取的数据实际呈现页面。
任何帮助都很感激。