Cara mencipta kunci unik dalam tatasusunan 2D papan dam menggunakan React dan JavaScript

Question

Saya baru dalam membina apl dan pengekodan, dan sebagai projek sampingan saya cuba membuat papan catur menggunakan React dan JavaScript. Saya sedang cuba mencari cara untuk mencipta kunci id unik dalam gelung 2D untuk komponen Papan Catur di bawah:

Ini ialah kod untuk komponen 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;

Ini adalah kod untuk komponen papan catur

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;

Saya cuba menggunakan fungsi peta sebelum ini

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
    }

Turut belajar useState

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

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

Cuba masukkan kaunter di sini tetapi terserempak dengan gelung tak terhingga (daripada fungsi papan catur)

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

Saya menjangkakan kaunter akan meningkat setiap kali jubin ditolak ke papan tolong bantu.

Answer 1

Anda boleh menggunakan penjana rentetan rawak asas (tidak selalu dijamin unik, tetapi ia sangat rawak)

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"