如何在ReactJS中实现值变化时的渲染

Question

当我点击添加到收藏夹（添加到本地存储但不更新计数时，当我点击按钮ref时，更新计数，我正在为我的电子商务项目做这个，我有一个愿望清单。当我将物品添加到愿望清单时，我将物品添加到本地存储中。我需要显示我添加到愿望清单的物品数量。 我不知道如何在值（本地存储）更改时自动渲染标题。

我添加了一个按钮，通过onClick调用cou。当我将物品添加到愿望清单时，什么都没有发生（不渲染），当我点击按钮时一切都很好。 有人可以帮忙吗？ 一切都在页眉组件（页面）上

const [count, setCount] = useState((JSON.parse(localStorage.getItem("liked"))));


  const cou = () => {
    let oldData = JSON.parse(localStorage.getItem('liked') || "[]")
    if (oldData.length === count.length) {
      setCount((JSON.parse(localStorage.getItem("liked"))))
    } else {
      setCount((JSON.parse(localStorage.getItem("liked"))))
    }
  };

  useEffect(() => {
    let oldData = JSON.parse(localStorage.getItem('liked') || "[]")
    if (oldData.length === count.length) {
      setCount((JSON.parse(localStorage.getItem("liked"))))
    } else {
      setCount((JSON.parse(localStorage.getItem("liked"))))
    }
  }, [(count.length)]);

这是页眉上的span

<span style={{ position: 'relative', left: '-21px', top: '-18px' }}>{count.length}</span>

Answer 1

而不是写 [(count.length)]，你能用 [count] 来检查一下吗？请告诉我输出结果。