我试图在本地存储中持久化一个对象数组，但是即使保存数组的状态发生了变化，它也没有更新。
UI中一切正常，甚至本地存储上的初始状态也保持正确，如果我在点击触发此更新的组件时记录"isActive"，它将打印包含修改值的数组，但在其依赖项数组上具有"isActive"状态的useEffect似乎不是"t执行其提供本地存储的实际状态的工作。

useEffect(() => {
  localStorage.setItem("menuState", JSON.stringify(isActive));
}, [isActive]);

function activate (e) {
  const selected = e.target.id
  setIsActive(
    planets => {
      return planets.map((planet) => {
          if (selected == planet.id && planet.active === true) {
            return planet
          } else if (selected != planet.id && planet.active === true) {
            return {...planet, active: !planet.active}
          } else if (selected != planet.id && planet.active === false) {
            return planet
          } else if (selected == planet.id && planet.active === false) {
            return {...planet, active: !planet.active}
          }
      })      
  }
  )
  setDestinationIndex(selected)
}

const [isActive, setIsActive] = useState(
  () =>
    JSON.parse(localStorage.getItem("menuState")) || [
      { id: 0, active: true },
      { id: 1, active: false },
      { id: 2, active: false },
      { id: 3, active: false },
    ]
);

我真的不知道该尝试什么，因为我在其他组件上也做了同样的事情，而且工作得很好，但不同的是，我只是持久化了一个数字而不是对象数组，但代码是相同的。
我已经删除了本地存储中的键，并再次运行了所有操作，但它获得了第一个状态，然后就不再有了。
local storage screenshot