时间戳

首页 > 解决方案 > index.js:1375 警告：列表中的每个孩子都应该有一个唯一的“关键”道具

javascript - index.js:1375 警告：列表中的每个孩子都应该有一个唯一的“关键”道具

问题描述

我写了一个二十一点游戏，但是在我从卡片组 API 查询 API 后，卡片从未显示在屏幕上。我已经控制台记录了玩家套牌和交易套牌，它有卡片数据但没有显示任何内容。

继承人的错误： index.js:1375 警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

检查BlackJack. 有关更多信息，请参阅https://reactjs.org/link/warning-keys。在 BlackJack 的 div (http://localhost:3000/static/js/main.chunk.js:4166:3) 在 WithStyles(BlackJack) (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.map(card => {
            return (
              <div key={card.code}>
                <img
                  src={card.image}
                  alt={card.value}
                />
              </div>
            )
          })}
        </div>
      </div>
    </div>
  )
};

导出默认 withStyles(styles)(BlackJack);

标签： javascriptreactjskey

解决方案

您正在设置的数据是数组的数组，因为res.data.cards已经是数组。

所以改变你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);
  };

推荐阅读