当我调用一次时，我的减速器被触发了两次。当我尝试修复它时出现了一些奇怪的东西

Question

这里是my code。演示站点是 here.

在演示网页上，我有 2 个按钮，1 个是“前往”按钮，另一个是“返回”按钮。假设当我点击“执行”按钮时，当前值将以以下格式显示在控制台中：

before:{"a":[12,27],"b":[63,14]}
after:{"a":[75,27],"b":[63,14]}

很遗憾，实际结果如下：

before:{"a":[12,27],"b":[63,14]}
after:{"a":[75,27],"b":[63,14]}
before:{"a":[12,27],"b":[63,14]}
after:{"a":[75,27],"b":[63,14]}

当我在 DEF 组件中评论以下行时：

setTimeout(()=>{
  setContextValue({undoUtil});
},10)

然后，当前值将以正确的格式显示在控制台中。但是，它不会触发屏幕布局刷新。

我该如何解决这个问题？

Answer 1

你到底想做什么？这非常不清楚。您看到它在控制台中登录两次的原因是因为您两次调用 undoUtil.set

    setTimeout(() => {
      temp["a"][0] = 75;
      undoUtil.set(temp);
    }, 0);

    setTimeout(
      ()=>{
        temp['a'][1]=20;
        undoUtil.set(temp);
      }
    ,0);

为什么设置超时？怎么回事？

我知道这不是答案，但评论太长了。

Answer 2

终于，我在DEF.js中找到了问题所在。可能是以下代码导致了问题。

  temp["a"][0] = 75;
  undoUtil.set(temp);
  temp['a'][1]=20;
  undoUtil.set(temp);

所有 undoUtil.set 都在使用相同的变量 temp，可能有些东西被覆盖了。

除此之外，在useUndoUtil.js set 方法中可能有同样的问题，

    case "set":
        console.log("before:"+JSON.stringify(state.presentValue));
        let temp=JSON.parse(JSON.stringify(state.pastValue));
        temp.push(JSON.parse(JSON.stringify(state.presentValue)));
        state.pastValue=temp;
        state.presentValue=JSON.parse(JSON.stringify(action.value));
        console.log("after:"+JSON.stringify(state.presentValue));
        return state;
        break;

我将 DEF.js 中的代码更改如下：

temp['a'][0]=75;    
undoUtil.set(JSON.parse(JSON.stringify(temp)));
temp['a'][1]=20;
undoUtil.set(JSON.parse(JSON.stringify(temp)));

而useUndoUtil.js中的代码如下：

case "set":
    let temp=JSON.parse(JSON.stringify(state.pastValue));
    temp.push(JSON.parse(JSON.stringify(state.presentValue)));
    return {
      pastValue:temp,
      presentValue:JSON.parse(JSON.stringify(action.value))
    }
    break;

它似乎如我所愿。谢谢 Adam，如果 none 涉及这个问题，我不会再尝试解决问题。

当我调用一次时，我的减速器被触发了两次。当我尝试修复它时出现了一些奇怪的东西

My reducer is triggered twice when I call it once. There something strange when I try to fix it

javascript

reactjs

use-reducer