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

Question

参考：我正在开发一款滑动益智游戏。

所以我有一个const-Board函数，我定义了两个状态，名为：

• 谜题碎片
• 隐藏索引编号

"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？

Answer 1

我建议您研究shouldComponentUpdate()和useEffect()挂钩。这里描述得很好：应该组件更新((吗？并举例说明。