So implementieren Sie das Rendern bei Wertänderungen in ReactJS

Question

Wenn ich auf „Zu Favoriten hinzufügen“ (zum lokalen Speicher hinzufügen) klicke, aber die Anzahl nicht aktualisiert wird, wenn ich auf die Schaltfläche „Ref“ klicke, wird die Anzahl aktualisiert. Ich mache das für mein E-Commerce-Projekt, ich habe eine Wunschliste. Wenn ich Artikel hinzufügen Beim Hinzufügen zur Wunschliste füge ich Artikel zum lokalen Speicher hinzu und muss die Anzahl der Artikel anzeigen, die ich zur Wunschliste hinzugefügt habe. Ich weiß nicht, wie ich den Header automatisch rendern soll, wenn sich der Wert (lokaler Speicher) ändert.

Ich habe eine Schaltfläche hinzugefügt, die Sie über onClick aufruft. Wenn ich den Artikel zur Wunschliste hinzufüge, passiert nichts (kein Rendern) und wenn ich auf die Schaltfläche klicke, ist alles in Ordnung. Kann jemand helfen? Alles befindet sich in der Header-Komponente (Seite)

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)]);

Dies ist die Spanne im Header

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

Answer 1

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