为什么我的宠物状态在 React 中只更新饥饿度，而不更新无聊度或能量？

我正在构建一个简单的 React 应用，其中有一只宠物，它有饥饿、无聊和精力等属性。我想以不同的间隔更新这些属性（每 5 秒更新一次饥饿，每 8 秒更新一次无聊，每 10 秒更新一次精力）。

但是，虽然饥饿值可以正确更新，但无聊值和精力值却不能。我曾经setInterval更新过这些值，但似乎只有饥饿值在更新。

相关代码如下：

import { useEffect, useState } from "react";
import { Pet } from "./types/pet";

function App() {
  const [pet, setPet] = useState<Pet | null>(null);

  useEffect(() => {
    // Load pet from localStorage or create a new pet
    const savedPet = localStorage.getItem("pet");
    if (savedPet) {
      try {
        const parsedPet = JSON.parse(savedPet) as Pet;
        setPet(parsedPet);
      } catch (error) {
        console.error("Error parsing saved pet:", error);
        createNewPet();
      }
    } else {
      createNewPet();
    }
  }, []);

  const updatePet = (updateFn: (currentPet: Pet) => Partial<Pet>) => {
    setPet((prevPet) => {
      if (!prevPet) return null;
      const updatedPet = { ...prevPet, ...updateFn(prevPet) };
      localStorage.setItem("pet", JSON.stringify(updatedPet));
      return updatedPet;
    });
  };

  useEffect(() => {
    if (!pet) return;

    const hungerInterval = setInterval(() => {
      updatePet((pet) => ({ hunger: Math.min(pet.hunger + 1, 100) }));
    }, 5000);

    const boredomInterval = setInterval(() => {
      updatePet((pet) => ({ boredom: Math.min(pet.boredom + 1, 100) }));
    }, 8000);

    const energyInterval = setInterval(() => {
      updatePet((pet) => ({ energy: Math.max(pet.energy - 1, 0) }));
    }, 10000);

    return () => {
      clearInterval(hungerInterval);
      clearInterval(boredomInterval);
      clearInterval(energyInterval);
    };
  }, [pet]);

  return (
    <div>
      <p>Hunger: {pet.hunger}%</p>
      <p>Boredom: {pet.boredom}%</p>
      <p>Energy: {pet.energy}%</p>
    </div>
  );
}

export default App;

我的经历：

• 饥饿值每 5 秒正确更新一次。
• 尽管无聊和能量统计数据的间隔设置方式相同，但它们并没有按预期更新。

我尝试过的：

• 我已检查过间隔并且它们似乎是正确的。
• 我尝试使用功能更新来更新状态以确保使用最新状态，但仍然只有饥饿更新。

有人知道为什么只有饥饿状态在更新，以及我该怎么做才能解决这个问题？