Mengapa saya masih mendapat "Amaran: Setiap elemen kanak-kanak dalam senarai harus mempunyai atribut 'kunci' unik" apabila saya melakukannya dengan betul?

Question

Amaran: Setiap elemen kanak-kanak dalam senarai harus mempunyai atribut "kunci" yang unik.

Sila semak kaedah pemaparan UserSidebar. Lihat https://reactjs.org/link/warning-keys untuk mendapatkan maklumat lanjut.

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

import React daripada "react";
import { makeStyles } daripada "@material-ui/core/styles";
import Laci daripada "@material-ui/core/Drawer";
import { Avatar, Butang } daripada "@material-ui/core";
import { CryptoState } daripada "../CryptoContext";
import { signOut } daripada "firebase/auth";
import { auth, db } daripada "../firebase";
import { numberWithCommas } daripada "./Banner/Carousel";
import { AiFillDelete } daripada "react-icons/ai";
import { doc, setDoc } daripada "firebase/firestore";

const useStyles = makeStyles({
  bekas: {
    lebar: 350,
    padding: 25,
    ketinggian: "100%",
    paparan: "flex",
    flexDirection: "lajur",
    fontFamily: "monospace",
  },
  profil: {
    lentur: 1,
    paparan: "flex",
    flexDirection: "lajur",
    alignItems: "pusat",
    jurang: "20px",
    ketinggian: "92%",
  },
  log keluar: {
    ketinggian: "8%",
    lebar: "100%",
    Warna latar belakang: "#EEBC1D",
    marginTop: 20,
  },
  gambar: {
    lebar: 200,
    ketinggian: 200,
    kursor: "penunjuk",
    Warna latar belakang: "#EEBC1D",
    objectFit: "mengandungi",
  },
  senarai pantauan: {
    lentur: 1,
    lebar: "100%",
    Warna latar belakang: "kelabu",
    sempadanRadius: 10,
    padding: 15,
    paddingTop: 10,
    paparan: "flex",
    flexDirection: "lajur",
    alignItems: "pusat",
    jurang: 12,
    overflowY: "skrol",
  },
  syiling: {
    padding: 10,
    sempadanRadius: 5,
    warna: "hitam",
    lebar: "100%",
    paparan: "flex",
    justifyContent: "ruang-antara",
    alignItems: "pusat",
    Warna latar belakang: "#EEBC1D",
    boxShadow: "0 0 3px hitam",
  },
});

eksport fungsi lalai UserSidebar() {
  kelas const = useStyles();
  const [state, setState] = React.useState({
    betul: palsu,
  });
  const { pengguna, setAlert, senarai pantau, token, simbol } = CryptoState();

  const toggleDrawer = (sauh, buka) => (acara) => {
    jika (
      event.type === "keydown" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      kembali;
    }

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

  const log Keluar = () => {
    logKeluar(auth);
    setAlert({
      terbuka: benar,
      jenis: "kejayaan",
      mesej: "Berjaya Log Keluar!",
    });

    toggleDrawer();
  };

  const removeFromWatchlist = async (syiling) => {
    const coinRef = doc(db, "senarai pantau", user.uid);
    cuba {
      tunggu setDoc(
        coinRef,
        { token: watchlist.filter((wish) => wish !== coin?.id) },
        { cantumkan: benar }
      );

      setAlert({
        terbuka: benar,
        mesej: `${coin.name} Dialih keluar daripada Senarai Pantau !`,
        jenis: "kejayaan",
      });
    } tangkap (ralat) {
      setAlert({
        terbuka: benar,
        mesej: error.message,
        jenis: "ralat",
      });
    }
  };

  kembali (
    <div>
      {["kanan"] .map((anchor) => (
        <React.Fragment key={anchor}>
          <Avatar
            onClick={toggleDrawer(anchor, true)}
            gaya={{
              tinggi: 38,
              lebar: 38,
              marginKiri: 15,
              kursor: "penunjuk",
              Warna latar belakang: "#EEBC1D",
            }}
            src={user.photoURL}
            alt={user.displayName || pengguna.e-mel}
          />
          <Laci
            anchor={anchor}
            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 || pengguna.e-mel}
                />
                <span
                  gaya={{
                    lebar: "100%",
                    Saiz fon: 25,
                    textAlign: "tengah",
                    Berat fon: "lebih berani",
                    wordWrap: "kata putus",
                  }}
                >
                  {user.displayName || pengguna.e-mel}
                </span>
                <div className={classes.watchlist}>
                  <span style={{ fontSize: 15, textShadow: "0 0 5px black" }}>
                    Senarai pantauan
                  </span>
                  {tokens.map((syiling) => {
                    jika (senarai pantauan.termasuk(coin.id))
                      kembali (
                        <div key={coin.id} className={classes.coin}>
                          <span>{coin.name}</span>
                          <span style={{ paparan: "flex", jurang: 8 }}>
                            {simbol}{" "}
                            {numberWithCommas(coin.current_price.toFixed(2))}
                            <AiFillDelete
                              style={{ kursor: "penunjuk" }}fontSize="16"
                              onClick={() => removeFromWatchlist(coin)}
                            />
                          </span>
                        </div>
                      );
                    jika tidak, kembalikan <></>;
                  })}
                </div>
              </div>
              <Butang
                variant="contained"
                className={classes.logout}
                onClick={logKeluar}
              >
                Log keluar
              </Butang>
            </div>
          </Laci>
        </React.Fragment>
      ))}
    </div>
  );
}

Saya telah menyediakan kekunci khusus jika diperlukan, tetapi saya tidak dapat mencari ralat dalam kod.

Answer 1

else return <></>

Jadi<></>被返回而没有key.

Anda hanya boleh mengembalikan rentetan kosong untuk mengelakkan amaran

else return ''