为什么当我把reducer钩子放到上下文中时，它会触发两次？

Question

我创建了一个undo-redo组件，它在DEF.js组件中工作正常。DEF.js的网址为here。我单击“go”按钮更改网格的所有内容，我可以单击" back“逐个单元格回滚内容。

当我将它导入到Redo.js中时，当它被触发时，它被调度两次。Redo.js的网址为here。

唯一的区别是我将撤销-重做组件放在了Redo.js的上下文中。

在Redo.js中，当我复制两个单元格内容，然后将其粘贴到新位置时，在按下Ctrl-Z之后，它会将内容回滚两次，您可能会在控制台中看到两次"undo“字样。(附图显示情况)

我尝试将不同的变量放入keyDown callBack钩子依赖数组中，但没有帮助。

let keyDown=useCallback((e)=>{
    console.log("keyDown");
    if (e.ctrlKey){
        //console.log(e.which);
        switch (e.which){
            case 89:
                //console.log("redo:"+JSON.stringify(rosterList));
                console.log("RedoBody.redo="+rosterList.canRedo);
                if (rosterList.canRedo){
                    e.preventDefault();
                    rosterList.redo();
                    props.updateContextValue({type:"updateShiftValue"});
                }
                break;
            case 90:
                e.preventDefault();
                console.log("RedoBody.undo="+rosterList.canUndo);
                if (rosterList.canUndo){
                    rosterList.undo();
                    props.updateContextValue({type:"updateShiftValue"});
                }
                break;
            default:break;    
        }
    } else {
        switch (e.which){
            case 27://handle "Esc" key event
                selectedRegionUtil.clearCopiedRegion();
                break;
            case 37://handle left arrow key event
                selectedRegionUtil.selectNextCell(e,-1,0);
                break;
            case 38://handle up arrow key event
                selectedRegionUtil.selectNextCell(e,0,-1);
                break;
            case 39://handle right arrow key event
                selectedRegionUtil.selectNextCell(e,1,0);
                break;          
            case 40://handle down arrow key event
                selectedRegionUtil.selectNextCell(e,0,1);
                break;    
            default:break;                 
        }
        props.updateContextValue({type:'updateSelectedRegion',value:selectedRegionUtil});
    }    
},[props,rosterList,selectedRegionUtil]);

有什么问题吗？

​

​

Answer 1

最后，我将自定义钩子useUndoUtil转换为一个普通的javascript对象UndoableData，它可以工作。