React Hooks-在地图中设置状态时无限循环

问题描述

供参考：我正在研究一种滑动益智游戏。

所以我有一个const Board函数，并且定义了两个状态，分别为：

• puzzlePieces
• hiddenIndexNumber

“ hiddenIndexNumber”的意义是跟踪游戏中的隐藏块索引。因此，在游戏开始之前，我将遍历为puzzlePieces创建的新数组，并使用map返回HTML元素。循环时，我要确保为我的hiddenIndexNumber获取隐藏块索引，以跟踪隐藏块。

这是我的代码（部分）的外观：

const Board = () => {

    const totalPieces = 9
    const hiddenNumber = totalPieces
    const[hiddenIndexNumber,setHiddenIndex] = useState(-1)
    
    // here I create an array of 9 elements and shuffle them with underline
    const [puzzlePieces,changePuzzlePieceContent] = useState( 
        _.shuffle( [ ...Array( totalPieces ).keys() ].map( num => num + 1 ) ) 
    )

    let puzzleElements = [ ...Array( totalPieces ).keys() ].map( index => {
        // the problem here is that setHiddenIndex makes the framework rerender
        // the DOM after setting the index number and I don't know how to solve the issue here
        if( puzzlePieces[index] === hiddenNumber ) {
            setHiddenIndex(index)
        }

        return <Puzzle 
            key         = { index }
            index       = { index }
            number      = { puzzlePieces[index] }
            hidden      = { puzzlePieces[index] === hiddenNumber && true }
            onChange    = { handleChange }
        />
    } )
}

问题出在此代码上：

if( puzzlePieces[index] === hiddenNumber ) {
    setHiddenIndex(index)
}

如何确保在不要求重新渲染DOM的情况下设置hiddenIndexNumber？

解决方法

我建议您研究一下shouldComponentUpdate()和useEffect()挂钩。 此处对此进行了很好的描述：shouldComponentUpdate()?并带有示例。