指数js:1375警告：列表中的每个孩子都应该有一个唯一的“键”道具

Question

我写了一个BlackJack游戏，但是在我从卡片API中查询API后，卡片从未显示在屏幕上。我有控制台记录了玩家甲板和交易甲板，它有卡片数据，但没有显示。

错误如下：index.js:1375警告：列表中的每个子级都应该有一个唯一的“键”道具。

检查BlackJack的渲染方法。参见https://reactjs.org/link/warning-keys了解更多信息。在黑杰克（http://localhost:3000/static/js/main.chunk.js： 4166:3）的div上，在威斯泰尔斯（黑杰克）（http://localhost:3000/static/js/0.chunk.js： 54861:31）

这是查询后的数据

[Array(2)]
0: Array(2)
0: {code: "6C", image: "https://deckofcardsapi.com/static/img/6C.png", images: {…}, value: "6", suit: "CLUBS"}
1: {code: "JD", image: "https://deckofcardsapi.com/static/img/JD.png", images: {…}, value: "JACK", suit: "DIAMONDS"}
length: 2
__proto__: Array(0)
length: 1
__proto__: Array(0)

[Array(1)]
0: Array(1)
0: {code: "4H", image: "https://deckofcardsapi.com/static/img/4H.png", images: {…}, value: "4", suit: "HEARTS"}
length: 1
__proto__: Array(0)
length: 1
__proto__: Array(0)

下面是我的代码：

import React, { useState, useEffect, useCallback } from 'react';
import axios from 'axios';
import { withStyles } from '@material-ui/core/styles';

const styles = () => ({
  app: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'column'
  },
  deckContainer: {
    textAlign: 'center'
  }
})

const BlackJack = ({ classes }) => {
  const [deckId, setDeckId] = useState(null);
  const [playerDeck, setPlayerDeck] = useState([]);
  const [dealerDeck, setDealerDeck] = useState([]);
  const [gameOver, setGameOver] = useState(false);
  const [winner, setWinner] = useState(null);

  useEffect(async () => {
    const deck_id = await axios.get('https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1')
      .then(res => res.data.deck_id);
    setDeckId(deck_id);
  }, []);

  const handleStartGame = async () => {

    const playerDeckList = [];
    const dealerDeckList = [];
    const playerDrawnCards = await axios.get(`https://deckofcardsapi.com/api/deck/${deckId}/draw/?count=2`).then(res => res.data.cards);
    playerDeckList.push(playerDrawnCards);
    setPlayerDeck(playerDeckList);

    const dealerDrawnCards = await axios.get(`https://deckofcardsapi.com/api/deck/${deckId}/draw/?count=1`).then(res => res.data.cards);
    dealerDeckList.push(dealerDrawnCards);
    setDealerDeck(dealerDeckList);
  };
  console.log(deckId);
  console.log(playerDeck);
  console.log(dealerDeck);
  // console.log(playerDeck[0]);


  return (
    <div className={classes.app}>
      <h1>Welcome to the Black Jack Game</h1>
      <br />
      <div>
        <button onClick={handleStartGame}>start game</button>
        {/* <button onClick={handlePlayerHit}>hit</button> */}
        {/* <button onClick={handlePlayerStand}>stand</button> */}
        {/* <button onClick={handlePlayerReset}>reset game</button> */}
      </div>
      <div>
        {/* <GameOver isGameOver={gameOver} /> */}
      </div>
      <br />
      <div>
        <h2>Dealer: </h2>
        <div className={classes.deckContainer}>
          {dealerDeck.map(card => {
            return (
              <div key={card.code}>
                <img
                  src={card.image}
                  alt={card.value}
                />
              </div>
            )
          })}
        </div>
        <br />
        <h2>Player: </h2>
        <div className={classes.deckContainer}>
          {playerDeck.html" target="_blank">map(card => {
            return (
              <div key={card.code}>
                <img
                  src={card.image}
                  alt={card.value}
                />
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
};

导出默认样式（样式）（BlackJack）；

Answer 1

这可能是因为获取api是异步操作。React首先呈现jsx，然后遍历逻辑，此时DealDeck映射为空。当fetch设置为false时，尝试为fetching api再设置1个状态（默认为false），然后仅当isFetching==false时，在JSX呈现相关组件中。

[isFetching, setIsFetching] = useState(true);
.
.
.
const handleStartGame = async ()=>{
.
.
.
      setIsFetching(false);
   }
.
.
.
return(
    {!isFetching && dealerDeck.map... }
)```

Answer 2

您正在设置的数据是一个数组的数组，因为res.data。卡片已经是一个数组。

因此，将您的handleStartGame更改为

  const handleStartGame = async () => {
    const playerDrawnCards = await axios
      .get(`https://deckofcardsapi.com/api/deck/${deckId}/draw/?count=2`)
      .then((res) => res.data.cards);
    setPlayerDeck(playerDrawnCards);

    const dealerDrawnCards = await axios
      .get(`https://deckofcardsapi.com/api/deck/${deckId}/draw/?count=1`)
      .then((res) => res.data.cards);
    setDealerDeck(dealerDrawnCards);
  };