Reactjs React useEffect依赖项数组:要包含的内容
我正在react中开发一个小的Tic-Tac-Toe游戏,它按照我的要求运行。除了es linter,一切都很好,我不想只是禁用一个规则,因为这可能是一个bug。这是我的两个钩子中的一个,问题发生在这里:(Reactjs React useEffect依赖项数组:要包含的内容,reactjs,react-hooks,eslint,tic-tac-toe,use-effect,Reactjs,React Hooks,Eslint,Tic Tac Toe,Use Effect,我正在react中开发一个小的Tic-Tac-Toe游戏,它按照我的要求运行。除了es linter,一切都很好,我不想只是禁用一个规则,因为这可能是一个bug。这是我的两个钩子中的一个,问题发生在这里:( useEffect(() => { if ( board !== initialState.board && firstTurnIsPlayed() && players[currentPlayerIndex].bot )
useEffect(() => {
if (
board !== initialState.board &&
firstTurnIsPlayed() &&
players[currentPlayerIndex].bot
) {
// Select random empty tile
const emtpyTiles = getEmptyTiles(board);
const randomTileIndex = Math.floor(Math.random() * emtpyTiles.length);
const randomTile = emtpyTiles[randomTileIndex];
placeCurrentPlayerOnCoordinate(randomTile);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentPlayerIndex]);
棋盘
玩家
currentPlayerIndex是状态,初始状态
是初始状态值的常数,firstTurnIsPlayer
是仅使用currentPlayerIndex的本地函数
这就是我现在使用的,它就像一个符咒。无论何时currentPlayerIndex
发生变化,因此是下一个玩家的新回合,我都会检查新的currentPlayer是否是机器人。如果他是一个机器人,我会自动将他的符号放在一个随机的空磁贴上,否则我什么也不做,只是等待玩家点击一个空磁贴
这就是我想要的,但不是linter想要的,因为我没有把我使用的所有其他变量都放进依赖数组。我知道我应该这样做,以确保我的钩子不会使用错误的(不是最新的)变量值。另一方面,如果我将这些变量添加到dependencies数组中,那么每次数组中的一个变量发生变化时都会执行钩子,这太频繁了,而且在我不希望它这样做的情况下
所以我现在的问题是:
如何在保持工作功能的同时满足我的过梁要求
根据您的规则,过梁应该提醒您最佳实践。一般来说,只使用默认/其他人的过梁设置,然后担心它是没有用的,有时只是禁用它就可以了。你真的不能。钩子的规则配置非常简单,有开/关和警告/错误。我建议我的团队遵循linter的建议(弄清楚对所有依赖项使用什么检查),除非有很好的理由不这样做,在这些情况下,我们禁用该行的linter,并要求注释和解释,因此如果效果回调被更新,下一个人将有更好的可视队列来重新检查依赖项。一旦禁用,它将不会/无法捕获未来的错误/问题。