Javascript 延迟的redux分派调用加快了UI更新

我试图在ReactJs、Redux和TS中创建一个简单的积木堆叠游戏。我想将堆叠中的顶行从左向右、向后无限地移动，直到空格键或回车键被按下为止。首先，当用户界面加载时，它工作正常，但很快它就开始加速用户界面更新，更新不一致。像这样

我想在200毫秒延迟后，每渲染一次，更新位置1步

我正试着这样做

useEffect(() => {
    if (play) {
        setTimeout(() => {
            moveStackLine(JSON.parse(JSON.stringify(data)), direction);
        }, 200);
    }
});

const renderLine = (startEndIndex: Array<number>) => {
    const columns = [];
    for (let j = 0; j < gameWidth; j++) {
        columns.push(
            <div className={cx(styles.ball, { [styles.active]: j >= startEndIndex[0] && j <= startEndIndex[1] })}></div>
        );
    }
    return columns;
}

const renderGame = () => {
    const lines = [];
    for (let i = 0; i < gameHeight; i++) {
        lines.push(
            <div id={i.toString()} className={styles.line}>
                {renderLine(data[i] || [-1, -1])}
            </div>
        )
    }
    return lines;
}

return (
    <>
        <div className={styles.gameContainer}>
            {renderGame()}
        </div>
    </>
)

moveStackLine功能：

const moveStackLine = useCallback((_data: GameData, directionCopy: 'left' | 'right') => {
    console.log('_data1', _data);
    let _direction = directionCopy;
    const lastIndexData = _data[_data.length - 1];
    if (_direction === 'right' && lastIndexData[1] < gameWidth) {
        lastIndexData[0] += 1;
        lastIndexData[1] += 1;
    }
    if (_direction === 'left' && lastIndexData[0] > 0) {
        lastIndexData[0] -= 1;
        lastIndexData[1] -= 1;
    }

    if (lastIndexData[1] === gameWidth - 1) {
        _direction = 'left';
    } else if (lastIndexData[0] === 0) {
        _direction = 'right';
    }
    _data.splice(_data.length - 1, 1, lastIndexData);
    dispatch({ type: ACTIONS.CHANGE_ACTIVE_LINE_START_END_POS, payload: _data });

    if (_direction !== directionCopy) {
        dispatch({ type: ACTIONS.CHANGE_DIRECTION, payload: _direction });
    }
}, [dispatch, gameWidth]);

数据数组中的每个数组表示一条线以及该线的起点和终点位置

我的渲染逻辑如下所示

useEffect(() => {
    if (play) {
        setTimeout(() => {
            moveStackLine(JSON.parse(JSON.stringify(data)), direction);
        }, 200);
    }
});

const renderLine = (startEndIndex: Array<number>) => {
    const columns = [];
    for (let j = 0; j < gameWidth; j++) {
        columns.push(
            <div className={cx(styles.ball, { [styles.active]: j >= startEndIndex[0] && j <= startEndIndex[1] })}></div>
        );
    }
    return columns;
}

const renderGame = () => {
    const lines = [];
    for (let i = 0; i < gameHeight; i++) {
        lines.push(
            <div id={i.toString()} className={styles.line}>
                {renderLine(data[i] || [-1, -1])}
            </div>
        )
    }
    return lines;
}

return (
    <>
        <div className={styles.gameContainer}>
            {renderGame()}
        </div>
    </>
)

const renderLine=（startendex:Array）=>{
常量列=[]；
for（设j=0；j{
常量行=[]；
for（设i=0；i

您在这里直接修改

\u数据，我假设它也是您从Redux存储中检索到的对象。这意味着您要在reducer之外修改redux存储

像这样的事情会引起各种副作用

不仅如此，您还修改了
lastIndexData
——它也是对存储中对象的引用——在这里，您还是直接修改存储，而不是用减速机更新它

试一试

const moveStackLine=useCallback（（数据：GameData，directionCopy:'left'|'right'）=>{
//.concat将创建一个新的数组引用，您可以（直接）根据需要修改它
const_data=data.concat（）

/.concat将创建一个新的数组引用，您可以（直接）根据需要修改它
lastIndexData=_data[_data.length-1].concat（）；
数据是否表示线路板上的位置？@van是的，每个数组都是一条线。这些数组中的数字表示线路在线路板上的开始和结束位置。这并没有解决问题。但我发现了。这是因为方向更改调度呼叫。无论如何，感谢您的帮助！！即使没有，这些都是明显的错误-keep关注未来可能发生的意外状态突变，也许可以看看官方的Redux工具包，它会提醒您这些。