我怎样才能在反应中只渲染一次？ （更多下文）

Question

I'm making a battleship game to learn react. I generate and randomly place 5 ships on the board, and if 2 ships share the same grids, I want to re-generate end re-place every ship. I tried while loops mainly, but most of the time I got an infinite loop, or something unexpected. I suppose the problem is I don't know how to control when the component should re-render.

This is my code (I removed the unneccesary parts):

const GameControl = () => {
    const [playerBoard, setPlayerBoard] = useState(() => GameBoard('player'));
    const [playerShipsArray, setPlayerShipsArray] = useState([]);


    //setting up game
    useEffect(() => {
        generateShips()
    }, [])

    useEffect(() => {

           // while(!checkTakenCells(playerShipsArray)){
           //     generateShips()
           // } **this is the problematic part**

    }, [playerShipsArray])

    placeShipsOnBoard(playerShipsArray, playerBoard)
    //setting up game

    function generateShips() {
        let shipsArr = [];
        while(shipsArr.length < 5){
            for(let i = 1; i < 6; i++){
                let startCoord = Math.floor(Math.random() * 100);

                const ship = Ship(i, i, isVertical(), startCoord)

                shipsArr.push(ship)
            }
        setPlayerShipsArray(shipsArr)
        }


    function checkTakenCells (array){
        let takenCells = [];
        array.forEach(ship => takenCells.push(...ship.takenCells()))
        //if 2 ships share the same coordinate, the takenCells array will have the shared coordinate twice
            return new Set(takenCells).size === takenCells.length //If ships are colliding, returns false
    }
    

    function placeShipsOnBoard(array, board){
        for (let i = 0; i < array.length; i++){
            board.placeShip(array[i], array[i].startCoord) 
        }
    }  
  
        return (
            <>
              //looping through playerBoard to generate a 10x10 grid
            </>
        )
}

Answer 1

const GameControl = () => {
    const [playerBoard, setPlayerBoard] = useState(() => GameBoard('player'));
    const [playerShipsArray, setPlayerShipsArray] = useState([]);

    //setting up game
    useEffect(() => { generateShips() }, [])

    useEffect(() => {
           // while(!checkTakenCells(playerShipsArray)){
           //     generateShips()
           // } **this is the problematic part**

    }, [playerShipsArray])

    placeShipsOnBoard(playerShipsArray, playerBoard)
 }

You code using hooks are fine, but keep in mind, everything inside GameControl will be re-run whenever a state changes.

Which means placeShipsOnBoard will be called again and again:)

This might be some boilercode, keep in mind React component isn't a game machine, it won't run every milli-second. It'll only run when something changed.

  const GameControl = () => {
    const [ships, setShips] = useState([])

    useEffect(() => {
      setTimeout(() => {
        // for every 50ms, 
        // move. the location of ships
        setShips(newLocationShips)
      }, 50)
    }, [])

    // render ships to the board
    return (ships.map(ship => ())

You need to think of a board which is not changing, and then ships which is changing based on something, which could be event or time.