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.