React 函數被調用兩次而不是一次

我正在使用 React 創建數獨遊戲應用程序。目前，我正在創建生成數獨方塊的函數（為其行和列中不存在的隨機數創建隨機數）。

問題是從useEffect()生成的數獨方塊中調用該函數並對其進行安慰，它會生成 2 個方塊數組而不是一個。如果我在普通 JS 中運行這些函數而不是 react，一切都會按預期工作，並生成 81 個正方形。

我錯過了什麼？謝謝！

import React, { useEffect } from 'react';
import '../App.css';
import Square from './Square';

function App() {

    type SquareType = {
        id: number;
        digit: number;
        index: number;
        shown: boolean;
    }

    let row: Array<SquareType> = [];
    let previuosRows: Array<SquareType> = [];
    let sudoku: Array<SquareType> = [];
    const possibleOptionsForDigit = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    function generateRandomArrayIndex(unusedDigits: Array<number> ) {
        return Math.floor(Math.random() * unusedDigits.length);
    }

    function unusedDigitInRowAndColumn( sudoku: Array<SquareType>, row: Array<SquareType>, columnIndex: number ) {
        let digitsExistingInRow: Array<number> = [];
        let digitsExistingInColumn: Array<number> = [];
        let unusedDigitsInRow: Array<number> = [];
        let unusedDigitsInColumn: Array<number> = [];
        let unusedDigits: Array<number>;
        let randomDigitFromUnused: number;
        
        digitsExistingInRow = row.map(square => square.digit);
        unusedDigitsInRow = possibleOptionsForDigit.filter(digit => !digitsExistingInRow.includes(digit));
    
        digitsExistingInColumn = sudoku.filter(square => square.index === columnIndex).map(square => square.digit);
        unusedDigitsInColumn = possibleOptionsForDigit.filter(digit => !digitsExistingInColumn.includes(digit));
    
        unusedDigits = unusedDigitsInRow.filter(digit => unusedDigitsInColumn.includes(digit)); 
        randomDigitFromUnused = unusedDigits[generateRandomArrayIndex(unusedDigits)];
    
        return randomDigitFromUnused;
    }

    function createSudokValues() {
        let idIncremented: number = 0;
        let generatedUnusedDigit: number = 0;
        for ( let y = 1; y <= 9; y++ ) {
            for ( let columnIndex = 1; columnIndex <= 9; columnIndex++ ) {
                while (row.length <= 9) {
                    generatedUnusedDigit = unusedDigitInRowAndColumn(sudoku, row, columnIndex);
                    //console.log("unusedDigitInRowAndColumn ", unusedDigitInRowAndColumn(sudoku, row, columnIndex));
                    row.push(
                        {
                            id: idIncremented,
                            digit: generatedUnusedDigit,
                            index: columnIndex,
                            shown: true
                        }
                    );
                    idIncremented++;
                    break;
                }
            }
            previuosRows = [ ...sudoku];
            sudoku = [ ...previuosRows, ...row ];
            row = [];
        }
        return sudoku;
    }

    useEffect(() => {
        console.log(createSudokValues())
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, []);
    return (
        <div className="App">
            <div className="pageContainer">
                <p>
                    Sudoku
                </p>
                <div className="sudokuContainer">
                    {
                        createSudokValues().map((square, idx) =>
                        <Square key={idx}></Square>
                        )
                    }
                </div>
            </div>
        </div>
    );
}

export default App;

這些是打印到控制台的方形對象（雖然只應生成 [0 - 99]，但會生成包含 [0 - 99] 和 [100 - 161] 項的數組）：