Je veux qu'une fois que j'ajoute un autre élément à la liste, la couleur de l'élément précédent ne change pas
const NoteItem = ({ note }) => {
const { colors, randomColorFunction } = useContext(AppContext);
const color = randomColorFunction(colors);
return (
<div
className={`flex flex-col min-h-28 py-6 justify-between px-3 rounded-md whitespace-pre-wrap break-words`}
style={{ backgroundColor: `${color}` }}
>
<span className="font-bold text-3xl">{note.title}</span>
<span>{note.content}</span>
<small className="text=xl">{note.date}</small>
</div>
);
}; 
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous pouvez résoudre ce problème de deux manières
1. Utilisez des guillemets
import { useRef } from "react"; const NoteItem = ({ note }) => { const { colors, randomColorFunction } = useContext(AppContext); const color = useRef(randomColorFunction(colors)); return (
...
);
};
2.Statut d'utilisation
import { useState } from "react"; const NoteItem = ({ note }) => { const { colors, randomColorFunction } = useContext(AppContext); const [color] = useState(randomColorFunction(colors)); return (
...
);
};
Si vous ne souhaitez pas changer la couleur, je pense que
useRefest plus adaptée.Voir iciAperçu en direct