我正在努力使用useEffect，它在應用程序加載時不會觸發，但只需單擊按鈕即可。這里是我的代碼：

export default function Person() {

const [person, setPerson] = useState({});
const [hitRandomUser, setHitRandomUser] = useState(0);

const fetchData = setCallback(async () => {
   const api = "http://localhost/api/person/random";
   const response = await fetch(api);
   const data = await response.json();
   setPerson(data);
   console.log(data);
  }, []);

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

const pax = {
   id: 1549,
   name: "Mikel",
   sexe: "boy",
   pop: 1
};
const onLike = () => {
    setHitRandomUser(hitRandomUser + 1);
    console.log(hitRandomUser);
    console.log("liked");
 };
 return (
      {!person.id && <h1>Loading...</h1>}
      <PersonCard person={person} onLike={onLike} />
  );
}

因此，這段代碼實際上正在使我的應用程序崩潰。問題是useEffect從來不會在使person為空dict時觸發，然后在試圖獲取person.id時在PersonCard崩潰。然而，如果我將pax傳遞給PersonCard，一切都會很好。當我從PersonCard使用onLike函數時，hitRandomUser狀態會發生變化，在這種情況下，useEffect會正確觸發，因為它是一個依賴項。如何在加載時使用useEffect觸發器，或setPerson以便使用它進行渲染？

update

我看到的問題是，如果我使用pax取消讀取person來呈現我的組件，如下所示：

return (
      <PersonCard person={pax} onLike={onLike} />
  );

我可以看到useEffect實際上被正確呈現，因為我可以看到帶有的console.log(data)的結果被正確顯示。所以應該有什么東西會引發錯誤，但我看不出來。