Pourquoi est-ce que je reçois toujours le message « Avertissement : chaque élément enfant de la liste doit avoir un attribut « clé » unique » lorsque je le fais correctement ?
<p><br /></p><blockquote>
<p>Avertissement : Chaque élément enfant de la liste doit avoir un attribut "clé" unique. </p>
<p>Veuillez vérifier la méthode de rendu de <code>UserSidebar</code>. Voir https://reactjs.org/link/warning-keys pour plus d'informations.</p>
</blockquote>
<p>这是导致上述错误的代码：</p>
<pre class="brush:php;toolbar:false;">importer React depuis "react" ;
importer { makeStyles } depuis "@material-ui/core/styles" ;
importer un tiroir depuis "@material-ui/core/Drawer" ;
importer {Avatar, Bouton} depuis "@material-ui/core" ;
importer { CryptoState } depuis "../CryptoContext" ;
importer { signOut } depuis "firebase/auth" ;
importer { auth, db } depuis "../firebase" ;
importer { numberWithCommas } depuis "./Banner/Carousel" ;
importer { AiFillDelete } depuis "react-icons/ai" ;
importer { doc, setDoc } depuis "firebase/firestore" ;
const useStyles = makeStyles({
récipient: {
largeur : 350,
rembourrage : 25,
hauteur : "100%",
affichage : "flex",
flexDirection : "colonne",
fontFamily : "monoespace",
},
profil: {
flexion: 1,
affichage : "flex",
flexDirection : "colonne",
alignItems : "centre",
écart : "20px",
hauteur : "92%",
},
Se déconnecter: {
hauteur : "8%",
largeur : "100%",
Couleur d'arrière-plan : "#EEBC1D",
marge supérieure : 20,
},
image: {
largeur : 200,
hauteur : 200,
curseur : "pointeur",
Couleur d'arrière-plan : "#EEBC1D",
objectFit : "contenir",
},
liste de surveillance : {
flexion: 1,
largeur : "100%",
Couleur d'arrière-plan : "gris",
rayon de frontière : 10,
rembourrage : 15,
rembourrageTop: 10,
affichage : "flex",
flexDirection : "colonne",
alignItems : "centre",
écart: 12,
overflowY : "faire défiler",
},
pièce de monnaie : {
rembourrage : 10,
rayon de frontière : 5,
la couleur noire",
largeur : "100%",
affichage : "flex",
justifierContent : "espace entre les deux",
alignItems : "centre",
Couleur d'arrière-plan : "#EEBC1D",
boxShadow : "0 0 3px noir",
},
});
exporter la fonction par défaut UserSidebar() {
const classes = useStyles();
const [état, setState] = React.useState({
à droite : faux,
});
const { utilisateur, setAlert, liste de surveillance, jetons, symbole } = CryptoState();
const toggleDrawer = (ancre, ouvert) => (événement) => {
si (
event.type === "keydown" &&
(event.key === "Tabulation" || event.key === "Shift")
) {
retour;
}
setState({ ...state, [ancre] : open });
} ;
const logOut = () => {
déconnexion(auth);
setAlerte({
ouvert : vrai,
tapez : "succès",
message : "Déconnexion réussie !",
});
basculeDrawer();
};
const removeFromWatchlist = async (coin) => {
const coinRef = doc(db, "watchlist", user.uid);
essayer {
attendre setDoc(
coinRef,
{ jetons : watchlist.filter((wish) => wish !== coin?.id) },
{ fusion : vrai }
);
setAlerte({
ouvert : vrai,
message : `${coin.name} Supprimé de la liste de surveillance !`,
tapez : "succès",
});
} attraper (erreur) {
setAlerte({
ouvert : vrai,
message : erreur.message,
erreur-type",
});
}
} ;
retour (
<div>
{["droite"].map((ancre) => (
<React.Fragment key={anchor}>
<Avatar
onClick={toggleDrawer(ancre, true)}
style={{
hauteur: 38,
largeur : 38,
margeGauche : 15,
curseur : "pointeur",
Couleur d'arrière-plan : "#EEBC1D",
}}
src={utilisateur.photoURL}
alt={user.displayName || utilisateur.email}
/>
<Tiroir
ancre={ancre}
ouvert={état[ancre]}
onClose={toggleDrawer(ancre, false)}
>
<div className={classes.container}>
<div className={classes.profile}>
<Avatar
className={classes.image}
src={utilisateur.photoURL}
alt={user.displayName || utilisateur.email}
/>
<envergure
style={{
largeur : "100%",
Taille de la police : 25,
textAlign : "centre",
fontWeight : "plus gras",
wordWrap : « mot coupé »,
}}
>
{user.displayName || utilisateur.email}
</envergure>
<div className={classes.watchlist}>
<span style={{ fontSize : 15, textShadow : "0 0 5px black" }}>
Liste de surveillance
</envergure>
{tokens.map((pièce) => {
si (watchlist.includes(coin.id))
retour (
<div key={coin.id} className={classes.coin}>
<span>{coin.name}</span>
<span style={{ display : "flex", écart : 8 }}>
{symbole}{" "}
{numéroAvecCommas(coin.current_price.toFixed(2))}
<AiFillSupprimer
style={{ curseur : "pointeur" }}taille de police="16"
onClick={() => supprimerFromWatchlist(pièce)}
/>
</envergure>
</div>
);
sinon, retournez <></>;
})}
</div>
</div>
<Bouton
variante = "contenu"
className={classes.logout}
onClick={logOut}
>
Se déconnecter
</Bouton>
</div>
</Tiroir>
</React.Fragment>
))}
</div>
);
}</pré>
<p>J'ai fourni les clés spécifiques lorsque cela était nécessaire, mais je ne trouve pas l'erreur dans le code. </p>
