正しく実行しているのに、「警告: リスト内の各子要素には一意の 'key' 属性が必要です」というメッセージが表示されるのはなぜですか?

Question

警告: リスト内の各子要素には、一意の「key」属性が必要です。

UserSidebarのレンダリング方法を確認してください。詳細については、https://reactjs.org/link/warning-keys を参照してください。

これは上記の警告を引き起こす代コードです:

React を "react" からインポートします。
import { makeStyles } から "@material-ui/core/styles";
"@material-ui/core/Drawer" から Drawer をインポートします。
import { アバター, ボタン } from "@material-ui/core";
import { CryptoState } から "../CryptoContext";
import {signOut} から "firebase/auth";
import { auth, db } from "../firebase";
import {numberWithCommas} から "./Banner/Carousel";
import { AiFillDelete } から "react-icons/ai";
import { doc, setDoc } から "firebase/firestore";

const useStyles = makeStyles({
  容器： {
    幅: 350、
    パディング: 25、
    高さ: "100%"、
    表示: "フレックス"、
    flexDirection: "列",
    フォントファミリー: "等幅",
  }、
  プロフィール: {
    フレックス: 1、
    表示: "フレックス"、
    flexDirection: "列",
    alignItems: "中央",
    ギャップ: "20px",
    高さ: "92%"、
  }、
  ログアウト： {
    高さ: "8%"、
    幅: "100%"、
    背景色: "#EEBC1D",
    マージントップ: 20、
  }、
  写真： {
    幅: 200、
    高さ: 200、
    カーソル: "ポインタ"、
    背景色: "#EEBC1D",
    objectFit: "含む",
  }、
  ウォッチリスト: {
    フレックス: 1、
    幅: "100%"、
    背景色: "グレー"、
    境界半径: 10、
    パディング: 15、
    パディングトップ: 10、
    表示: "フレックス"、
    flexDirection: "列",
    alignItems: "中央",
    ギャップ: 12、
    オーバーフローY: "スクロール",
  }、
  コイン: {
    パディング: 10、
    境界半径: 5、
    色: "黒"、
    幅: "100%"、
    表示: "フレックス"、
    justifyContent: "間のスペース",
    alignItems: "中央",
    背景色: "#EEBC1D",
    boxShadow: "0 0 3px 黒",
  }、
});

デフォルト関数 UserSidebar() をエクスポート {
  const クラス = useStyles();
  const [状態, setState] = React.useState({
    右: 偽、
  });
  const { ユーザー、setAlert、ウォッチリスト、トークン、シンボル } = CryptoState();

  const toggleDrawer = (アンカー, オープン) => (イベント) => {
    もし （
      イベント.タイプ === "キーダウン" &&
      (event.key === "Tab" || event.key === "Shift")
    ) {
      戻る;
    }

    setState({ ...状態, [アンカー]: オープン });
  };

  const logOut = () => {
    サインアウト(認証);
    setAlert({
      オープン: true、
      タイプ: 「成功」、
      メッセージ: "ログアウトに成功しました!",
    });

    toggleDrawer();
  };

  const RemoveFromWatchlist = async (コイン) => {
    const CoinRef = doc(db, "ウォッチリスト", user.uid);
    試す {
      setDoc を待ちます(
        コイン参照、
        { トークン: watchlist.filter((wish) =>wish !== コイン?.id) },
        {マージ: true }
      );

      setAlert({
        オープン: true、
        メッセージ: `${coin.name} がウォッチリストから削除されました !`、
        タイプ: 「成功」、
      });
    } キャッチ (エラー) {
      setAlert({
        オープン: true、
        メッセージ: エラー.メッセージ、
        タイプ:「エラー」、
      });
    }
  };

  戻る （
    <div>
      {["右"].map((アンカー) => (
        <React.Fragment key={anchor}>
          <アバター
            onClick={toggleDrawer(anchor, true)}
            スタイル={{
              身長: 38、
              幅: 38、
              マージン左: 15、
              カーソル: "ポインタ"、
              背景色: "#EEBC1D",
            }}
            src={user.photoURL}
            alt={user.displayName ||ユーザー.メール}
          />
          <ドロワー
            アンカー={アンカー}
            open={状態[アンカー]}
            onClose={toggleDrawer(アンカー, false)}
          >
            <div className={classes.container}>
              <div className={classes.profile}>
                <アバター
                  className={classes.picture}
                  src={user.photoURL}
                  alt={user.displayName ||ユーザー.メール}
                />
                <スパン
                  スタイル={{
                    幅: "100%"、
                    フォントサイズ: 25、
                    textAlign: "中央",
                    fontWeight: "太字",
                    wordWrap: "ブレイクワード",
                  }}
                >
                  {user.displayName ||ユーザー.メール}
                </span>
                <div className={classes.watchlist}>
                  <span style={{ fontSize: 15, textShadow: "0 0 5px black" }}>
                    ウォッチリスト
                  </span>
                  {トークン.マップ((コイン) => {
                    if (watchlist.includes(coin.id))
                      戻る （
                        <div key={coin.id} className={classes.coin}>
                          <span>{coin.name}</span>
                          <span style={{ 表示: "フレックス"、ギャップ: 8 }}>
                            {記号}{" "}
                            {numberWithCommas(coin.current_price.toFixed(2))}
                            <AiFill削除
                              style={{ カーソル: "ポインタ" }}fontSize="16"
                              onClick={() =>removeFromWatchlist(coin)}
                            />
                          </span>
                        </div>
                      );
                    それ以外の場合は戻ります <></>;
                  })}
                </div>
              </div>
              <ボタン
                バリアント = "を含む"
                className={classes.logout}
                onClick={ログアウト}
              >
                ログアウト
              </ボタン>
            </div>
          </引き出し>
        </React.Fragment>
      ))}
    </div>
  );
}

必要な場所に特定のキーを指定しましたが、コード内にエラーが見つかりません。

Answer 1

リーリー

したがって、<></> は、key なしで返されます。

警告を回避するには、単純に空の文字列を返すことができます

リーリー