Warum erhalte ich immer noch die Meldung „Warnung: Jedes untergeordnete Element in der Liste sollte ein eindeutiges Schlüsselattribut haben“, wenn ich es richtig mache?

Question

Warnung: Jedes untergeordnete Element in der Liste sollte ein eindeutiges „Schlüssel“-Attribut haben.

Bitte überprüfen Sie die Rendering-Methode von UserSidebar. Weitere Informationen finden Sie unter https://reactjs.org/link/warning-keys.

这是导致上述错误的代码：

import React from „react“;
import { makeStyles } from „@material-ui/core/styles“;
Schublade aus „@material-ui/core/Drawer“ importieren;
import { Avatar, Button } from „@material-ui/core“;
import { CryptoState } from "../CryptoContext";
import { signOut } from „firebase/auth“;
import { auth, db } from „../firebase“;
import { numberWithCommas } from "./Banner/Carousel";
import { AiFillDelete } aus „react-icons/ai“;
import { doc, setDoc } from „firebase/firestore“;

const useStyles = makeStyles({
  Container: {
    Breite: 350,
    Polsterung: 25,
    Höhe: „100 %“,
    Anzeige: „flex“,
    flexDirection: „Spalte“,
    Schriftartenfamilie: „monospace“,
  },
  Profil: {
    Flex: 1,
    Anzeige: „flex“,
    flexDirection: „Spalte“,
    alignItems: „center“,
    Lücke: „20px“,
    Höhe: „92 %“,
  },
  Ausloggen: {
    Höhe: „8%“,
    Breite: „100 %“,
    Hintergrundfarbe: „#EEBC1D“,
    marginTop: 20,
  },
  Bild: {
    Breite: 200,
    Höhe: 200,
    Cursor: „Zeiger“,
    Hintergrundfarbe: „#EEBC1D“,
    objectFit: „enthalten“,
  },
  Beobachtungsliste: {
    Flex: 1,
    Breite: „100 %“,
    Hintergrundfarbe: „grau“,
    Grenzradius: 10,
    Polsterung: 15,
    PolsterungTop: 10,
    Anzeige: „flex“,
    flexDirection: „Spalte“,
    alignItems: „center“,
    Lücke: 12,
    overflowY: „scrollen“,
  },
  Münze: {
    Polsterung: 10,
    Grenzradius: 5,
    Farbe: Schwarz",
    Breite: „100 %“,
    Anzeige: „flex“,
    justifyContent: „space-between“,
    alignItems: „center“,
    Hintergrundfarbe: „#EEBC1D“,
    boxShadow: „0 0 3px schwarz“,
  },
});

Standardfunktion UserSidebar() exportieren {
  const-Klassen = useStyles();
  const [state, setState] = React.useState({
    richtig: falsch,
  });
  const { user, setAlert, watchlist, tokens, symbol } = CryptoState();

  const toggleDrawer = (Anker, öffnen) => (Ereignis) => {
    Wenn (
      event.type === "keydown" &&
      (event.key === „Tab“ || event.key === „Shift“)
    ) {
      zurückkehren;
    }

    setState({ ...state, [anchor]: open });
  };

  const logOut = () => {
    signOut(auth);
    setAlert({
      offen: wahr,
      Typ: „Erfolg“,
      Meldung: „Abmeldung erfolgreich!“,
    });

    toggleDrawer();
  };

  const removeFromWatchlist = async (coin) => {
    const CoinRef = doc(db, "watchlist", user.uid);
    versuchen {
      warte auf setDoc(
        CoinRef,
        { tokens: watchlist.filter((wish) => Wish !== Coin?.id) },
        { merge: true }
      );

      setAlert({
        offen: wahr,
        Nachricht: „${coin.name} von der Beobachtungsliste entfernt!“,
        Typ: „Erfolg“,
      });
    } Catch (Fehler) {
      setAlert({
        offen: wahr,
        Nachricht: error.message,
        Typ: „Fehler“,
      });
    }
  };

  zurückkehren (
    <div>
      {["right"].map((anchor) => (
        <React.Fragment key={anchor}>
          <Avatar
            onClick={toggleDrawer(anchor, true)}
            Stil={{
              Höhe: 38,
              Breite: 38,
              marginLeft: 15,
              Cursor: „Zeiger“,
              Hintergrundfarbe: „#EEBC1D“,
            }}
            src={user.photoURL}
            alt={user.displayName || Benutzer Email}
          />
          <Schublade
            Anker={Anker}
            open={state[anchor]}
            onClose={toggleDrawer(anchor, false)}
          >
            <div className={classes.container}>
              <div className={classes.profile}>
                <Avatar
                  className={classes.picture}
                  src={user.photoURL}
                  alt={user.displayName || Benutzer Email}
                />
                <Spanne
                  Stil={{
                    Breite: „100 %“,
                    Schriftgröße: 25,
                    textAlign: „center“,
                    FontWeight: „bolder“,
                    wordWrap: „Wortumbruch“,
                  }}
                >
                  {user.displayName || Benutzer Email}
                </span>
                <div className={classes.watchlist}>
                  <span style={{ fontSize: 15, textShadow: "0 0 5px black" }}>
                    Beobachtungsliste
                  </span>
                  {tokens.map((coin) => {
                    if (watchlist.includes(coin.id))
                      zurückkehren (
                        <div key={coin.id} className={classes.coin}>
                          <span>{coin.name}</span>
                          <span style={{ display: "flex", gap: 8 }}>
                            {symbol}{" "}
                            {numberWithCommas(coin.current_price.toFixed(2))}
                            <AiFillDelete
                              style={{ Cursor: "Zeiger" }}Schriftartgröße="16"
                              onClick={() => removeFromWatchlist(coin)}
                            />
                          </span>
                        </div>
                      );
                    sonst return <></>;
                  })}
                </div>
              </div>
              <Schaltfläche
                Variante="enthalten"
                className={classes.logout}
                onClick={logOut}
              >
                Ausloggen
              </Button>
            </div>
          </Schublade>
        </React.Fragment>
      ))}
    </div>
  );
}

Ich habe die spezifischen Schlüssel bereitgestellt, wo sie benötigt wurden, aber ich kann den Fehler im Code nicht finden.

Answer 1

else return <></>

所以<></>被返回而没有key。

你可以简单地返回一个空字符串来避免警告

else return ''