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] 項的陣列）：

uj5u.com熱心網友回復：

@mcanzerini 是的，useEffect您可以createSudokValues在sudoku不呼叫第二次的情況下呼叫和 jsx 渲染createSudokValues。在更新 JSX 時，您必須使用 hook useStateforsudoku重新呈現狀態。然后只需執行sudoku.map()而不是createSudokValues().map(). 例子：

const [sudoku, setSudoku] = useState([]);


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;
                }
            }
            setSudoku(prev => { 
               return [ ...prev, ...row]
            });
            row = [];
        }
}

useEffect(() => {
    createSudokValues();
}, []);

JSX：

{
    sudoku.map((square, idx) =>
        <Square key={idx}></Square>
    )
}

uj5u.com熱心網友回復：

一個明顯的解釋是 Chrome 控制臺將長度 > 100 的陣列分成多個部分，即，如果陣列的長度為 210，控制臺將記錄如下內容：

> [0-99] 
> [100-199]
> [200-209]
length: 210

因此，如果陣列的長度為 162，它將按照您獲得的方式顯示它們。

或者

如果你期待 100 個值，

這可能是由于 useEffect 鉤子中的空依賴項串列而發生的。嘗試向它傳遞一個常量值。

例如：

useEffect(callback, [null]);

useEffect(callback, [1]);

標籤：javascript 反应 异步 异步等待

上一篇：如何在異步任務執行時顯示一個小部件，然后在它在顫振中執行后顯示一個完成的小部件

下一篇：在tokio-tungstenite下一個原因退出