如何使用 React 和 JavaScript 在棋盤的 2D 陣列中建立唯一鍵

Question

我是建立應用程式和編碼的新手，作為一個業餘項目，我正在嘗試使用 React 和 JavaScript 製作棋盤。我目前正試圖找出一種方法，在下面的 Chessboard 元件的 2D for 循環中創建一個唯一的 id 鍵：

這是 Tile 元件的程式碼

import './Tile.css';

const WhiteTile = () =>
{
   return(
      <div className='TileWhite'></div>
   )
}

const AquaTile = () =>
{
   return(
      <div className='TileAqua'></div>
   )
}


const ENUM_OBJECT = 
{
   whiteTile: <WhiteTile/>,
   aquaTile: <AquaTile/>,
};

function Tile({tileType}) 
{
   return ENUM_OBJECT[tileType]
}

export default Tile;

這是棋盤元件的程式碼

import React from 'react';  
import '../ChessBoard/Chessboard.css'
import Tile from './Tile';



function ChessBoard()
{  
    const xCoordinates = ["a", "b", "c", "d", "e", "f", "g", "h", "0"];


    const yCoordinates = ["0", "1", "2", "3", "4", "5", "6", "7", "8"];
    
    const coordinatesBoard = []; 

    const RenderCoordinates = () =>
    {

        for(let y = yCoordinates.length; y > 0; y--)
        {
            for(let x = 0; x < xCoordinates.length - 1; x++)
            {   
                if(x % 2 === 0)
                {
                    coordinatesBoard.push(<Tile tileType={"whiteTile"} key={''}></Tile>);
                }
                else
                {
                    coordinatesBoard.push(<Tile tileType={"aquaTile"} key={''}></Tile>);

                }
            }
        }
        return coordinatesBoard; 
    }


    return(<div className="App">
            {<RenderCoordinates/>}
            </div>)
    
}

export default ChessBoard;

我之前嘗試過使用地圖功能

const RenderTiles = () =>
    {
        const cBoard = coordinatesBoard.map((xyCoordinates, index) =>
        {
                if(index % 2)
                {
                    return(
                    <div className ="Tile1" key={index}>
                        {xyCoordinates}
                    </div>
                    )
                }
                else 
                {
                    return(
                    <div className ="Tile2" key={index}>
                        {xyCoordinates}
                    </div>
                    )
                }
        });

        return cBoard
    }

也研究了 useState

const [counter, setCounter] = useState(0);

    const increment = () => 
    {
    
        setCounter(counter + 1);
    }

嘗試在這裡插入計數器，但遇到無限循環（來自棋盤函數）

coordinatesBoard.push(<Tile tileType={"whiteTile"} key={counter + 1}></Tile>);

我期望每次將圖塊推到棋盤上時計數器都會增加 請幫忙。

Answer 1

可以使用基本的隨機字串產生器（並不總是保證唯一，但它非常隨機）

function randomString() {
  const possibleChars = 'abcxyz123'
  const length = 10

  const randString = []

  for (let i = 0; i <= length; i++) {
    const randomChar = possibleChars[Math.floor(Math.random() * possibleChars.length)]
    randString.push(randomChar)
  }
  
  return randString.join('')
}

console.log(randomString()) // "3zb1baxbbyy"