So erstellen Sie mit React und JavaScript eindeutige Schlüssel in einem 2D-Array eines Schachbretts

Question

Ich bin neu im Erstellen von Apps und im Codieren und versuche als Nebenprojekt, ein Schachbrett mit React und JavaScript zu erstellen. Ich versuche derzeit, einen Weg zu finden, einen eindeutigen ID-Schlüssel in der 2D-for-Schleife der Schachbrettkomponente unten zu erstellen:

Dies ist der Code für die Tile-Komponente

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;

Dies ist der Code für die Schachbrettkomponente

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;

Ich habe schon einmal versucht, die Kartenfunktion zu nutzen

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
    }

Auch useState studiert

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

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

Ich habe versucht, hier einen Zähler einzufügen, bin aber auf eine Endlosschleife gestoßen (aus der Schachbrettfunktion)

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

Ich habe erwartet, dass sich der Zähler jedes Mal erhöht, wenn ein Plättchen auf das Brett geschoben wird Bitte helfen Sie.

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"