<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>

else return <></>

else return ''