Comment implémenter le rendu lorsque la valeur change dans ReactJS
Quand je clique sur ajouter aux favoris (ajouter au stockage local mais pas mettre à jour le décompte, lorsque je clique sur le bouton ref, le décompte est mis à jour, je fais ça pour mon projet e-commerce, j'ai une liste de souhaits. Quand J'ajoute l'article Lors de l'ajout à la liste de souhaits, j'ajoute des articles au stockage local et je dois afficher le nombre d'articles que j'ai ajoutés à la liste de souhaits. Je ne sais pas comment afficher automatiquement l'en-tête lorsque la valeur (stockage local) change.
J'ai ajouté un bouton qui appelle cou via onClick. Quand j'ajoute l'article à la wishlist rien ne se passe (pas de rendu) et quand je clique sur le bouton tout va bien. Quelqu'un peut-il m'aider ? Tout est sur le composant d'en-tête (page)
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)]);
C'est la durée sur l'en-tête
<span style={{ position: 'relative', left: '-21px', top: '-18px' }}>{count.length}</span>