React钩子在库事件的回调函数中不返回更新的状态值(FabricJS)

Question

我在FabricJS事件中没有得到更新的状态值，如对象：修改，鼠标：向上等。但是我可以在回调函数里面设置状态值，当我试图获取状态值时，它返回的是初始值，而不是更新的状态值。

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

例如：初始值是0。

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

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

编辑。

我想实现的是，每当对象被修改时，我都会尝试保存FabricJS对象（对于Undo，Redo操作）。每当对象发生变化时，FabricJS都会触发一个事件，并调用组件中的一个函数。但是我没有得到状态值。

代码。

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);
   }
}

Answer 1

下面是一个关于如何在react组件中保存canvas状态的一般例子。你需要一个单独的变量来跟踪canvas的历史变化。

import React, { useRef, useEffect, useCallback, useState } from "react";
import { fabric } from "fabric";

export default function App() {
  const canvasRef = useRef();
  const [canvas, setCanvas] = useState();
  // Array of objects, that represents canvas state history
  const [canvasHistory, setCanvasHistory] = useState([initialState]);
  const [canvasState, setCanvasState] = useState(initialState);

  const onObjectModified = useCallback(
    e => {
      const newCanvasState = e.target.canvas.toJSON();
      setCanvasState(newCanvasState);
      // Limit history depth
      setCanvasHistory(history => [...history, newCanvasState].slice(-4));
    },
    [setCanvasState, setCanvasHistory]
  );

  useEffect(() => {
    const canvas = new fabric.Canvas(canvasRef.current);
    canvas.loadFromJSON(initialState);

    canvas.on("object:modified", onObjectModified);
    setCanvas(canvas);

    // Don't forget to destroy canvas and remove event listeners on component unmount
    return () => canvas.dispose();
  }, [canvasRef, onObjectModified, setCanvas]);

  const moveHistory = useCallback(
    step => {
      const currentStateIndex = canvasHistory.indexOf(canvasState);
      const prevState = canvasHistory[currentStateIndex + step];
      canvas.loadFromJSON(prevState);
      setCanvasState(prevState);
    },
    [canvas, canvasState, canvasHistory, setCanvasState]
  );

  const onUndo = useCallback(() => moveHistory(-1), [moveHistory]);

  const onRedo = useCallback(() => moveHistory(1), [moveHistory]);

  return (
    <div>
      <button onClick={onUndo} disabled={canvasHistory[0] === canvasState}>
        Undo
      </button>
      <button
        onClick={onRedo}
        disabled={canvasHistory[canvasHistory.length - 1] === canvasState}
      >
        Redo
      </button>
      <canvas ref={canvasRef} width="300" height="300" />
    </div>
  );
}

另外，我做了一个最小的工作例子 此处