Javascript React钩子不从库事件（FabricJS）返回回调函数内的更新状态值

我没有在FabricJS事件中获得更新的状态值，如object:modified、mouse:up等。。。但我可以在回调函数中设置状态值

当我试图获取状态值时，它返回的是初始值，而不是更新后的值

示例：

const [count, setCount] = useState(0);

初始值为0。我使用setCount将值更新为1。每当我试图在回调函数中获取“count”时，它都返回0或初始值

编辑：

---

我试图实现的是，每当修改对象时（对于撤消、重做操作），我都会尝试保存FabricJS对象。每当对象发生更改时，FabricJS都会触发事件并调用组件中的函数。但是我没有得到状态值

代码：

---

下面是如何在react组件中保存画布状态的一般示例。您需要一个单独的变量来跟踪画布历史记录的更改：

import React，{useRef，useffect，useCallback，useState}来自“React”；
从“fabric”导入{fabric}；
导出默认函数App（）{
const canvasRef=useRef（）；
const[canvas，setCanvas]=useState（）；
//表示画布状态历史的对象数组
const[canvashhistory，setcanvashhistory]=useState（[initialState]）；
const[canvasState，setCanvasState]=useState（initialState）；
const onObjectModified=useCallback(
e=>{
const newcanvastate=e.target.canvas.toJSON（）；
setCanvasState（新CanvasState）；
//限制历史深度
setCanvasHistory（历史=>[…历史，newCanvasState].slice（-4））；
},
[setCanvasState，setCanvasHistory]
);
useffect（（）=>{
const canvas=new fabric.canvas（canvasRef.current）；
loadFromJSON（initialState）；
canvas.on（“object:modified”，onObjectModified）；
设置画布（画布）；
//不要忘记在组件卸载时销毁画布并删除事件侦听器
return（）=>canvas.dispose（）；
}，[canvasRef，onObjectModified，setCanvas]）；
const moveHistory=useCallback(
步骤=>{
const currentStateIndex=canvasHistory.indexOf（canvasState）；
const prevState=canvashhistory[currentStateIndex+step]；
loadFromJSON（prevState）；
setCanvasState（prevState）；
},
[画布，画布状态，画布历史，设置画布状态]
);
const onUndo=useCallback（（）=>moveHistory（-1），[moveHistory]）；
const onRedo=useCallback（（）=>moveHistory（1），[moveHistory]）；
返回(
撤消
重做
);
}

---

另外，我做了一个简单的工作示例

您是否尝试过setCount（prev=>prev+1）？在调用setCount之前，我需要检查计数值。如果我调用“setCount”，它正在工作。但无法获取值并进行比较。我试图实现的是，每当修改对象时，我都会尝试保存FabricJS对象。每当对象发生更改时，它都会从FabricJS触发一个事件，并调用组件中的函数。但我不知道函数中的状态。请在问题中添加更多相关代码，如何调用

setCount

以及从何处获取数据unsuccessfully@HagaiHarari对不起，刚才添加了我的代码谢谢你的示例。是否可以添加一个新的常量来推送状态，以便当用户单击“撤消”或“重做”时，我将相应地显示该状态？我已经更新了我的代码。如果你看一下，你会发现，我无法获取之前的数据并推送它。这是可能的，但你必须将之前的状态保存在一个单独的变量中，才能调用

loadFromJSON

。更新了我的沙盒示例。

function MyFunction()
{
   const [canvasObj, setCanvasObj] = useState({});
   const [state, setCanvasState] = useState('');
   const [undo, setUndo] = useState([]);

   useEffect(() => {

      if(Object.keys(canvasObj).length == 0) {
         var _canvas = new fabric.Canvas('canvas', {
            preserveObjectStacking: true,
         });

         setCanvasObj(_canvas);

         _canvas.on("object:modified", saveState);
      }
   });

   function saveState() {
       console.log(canvasObj); // Returns null even though object initialised
       if (state) { // state value returns null. Due to this, I can't get the existing data and push the current state
          let newState = undo;
          newState.push(state);
          setUndo(newState);
       }
       const tmpState = JSON.stringify(canvasObj);
       setCanvasState(tmpState);
   }
}