反應鈎子 - 在 function 中更新 State

Question

hi i have an issue with set state, i write the function that i get Position x,y and size of width, height(That is the name of the state that holds them POx1, POY1, widthSize, heightSize) and depend on user choise ，我改變了用戶找到我並使用它們的狀態。 但是在所有這些 State 的第一個 setSate 之后，我無法更新和或更改它們。 這些是我的代碼：

function DrawPicture() { // this function call after click
    setCountClick(CountClick + 1);
    var Se_image = new Image();
    Se_image.src = ImgSRC;// (ImgSRC) is the State i define it before


    Se_image.onload = function () {
      ctxRef.current.globalCompositeOperation = "source-over";
      if (CountClick === 2) {// For some reason, I want this condition to be executed after calling the above function twice

        var img = Se_image 

        PictureCategory(img) // This function is shown below

        var canvas = canvasRef.current

        var ctx = canvas.getContext('2d');
        var imageData = ctx.getImageData(POx1, POY1, widthSize, heightSize);
        var data = imageData.data;

        console.log(lineColor);
        const r = parseInt(lineColor.substr(1, 2), 16)
        const g = parseInt(lineColor.substr(3, 2), 16)
        const b = parseInt(lineColor.substr(5, 2), 16)
        var changeColor = function () {
          for (var i = 0; i < data.length; i += 4) {

            data[i] = r
            data[i + 1] = g
            data[i + 2] = b
          }
          ctx.putImageData(imageData, POx1, POY1);
        };

        changeColor();

        setCountClick(1);
        setPointer(false);
      }
    }

  }

這是我的 PictureCategory() function：為方便起見，我只采用了其中一種模式

function PictureCategory(image) {
    switch (PictureTopic) {
      case "Girl":
        const XG = POx1 - (0.5 * widthSize) < 0 ? 0 : POx1 - (0.5 * widthSize);
        const newWidth= 2.4*widthSize;
        const newheight= 2.5*widthSize;
        setPOx1(XG)
        setwidthSize(newWidth)
        setheightSize(newheight)
        ctxRef.current.clearRect(XG, POY1, newWidth, newheight);
        ctxRef.current.drawImage(image, XG, POY1, 2.4 * widthSize, 2.5 * heightSize);

        break;
      default:
        ctxRef.current.drawImage(image, POx1, POY1, widthSize, heightSize);
        break;
    }
    


  }

我想用上面的 function 改變狀態，請幫幫我！！！

Answer 1

我知道這不是你對這個問題的回答。 但是您可以使用此代碼來獲得新的價值。 我將新值存儲在 object 中並返回：

function DrawPicture() { 
    setCountClick(CountClick + 1);
    var Se_image = new Image();
    Se_image.src = ImgSRC;


    Se_image.onload = function () {
      ctxRef.current.globalCompositeOperation = "source-over";
      if (CountClick === 2) {

        var img = Se_image 

        const Sizes =PictureCategory(img) // you can store new value in valible

        var canvas = canvasRef.current

        var ctx = canvas.getContext('2d');
        var imageData = ctx.getImageData(Sizes[0].x, Sizes[0].y, Sizes[0].width, Sizes[0].height);
        var data = imageData.data;

        console.log(lineColor);
        const r = parseInt(lineColor.substr(1, 2), 16)
        const g = parseInt(lineColor.substr(3, 2), 16)
        const b = parseInt(lineColor.substr(5, 2), 16)
        var changeColor = function () {
          for (var i = 0; i < data.length; i += 4) {

            data[i] = r
            data[i + 1] = g
            data[i + 2] = b
          }
          ctx.putImageData(imageData,Sizes[0].x, Sizes[0].y);
        };

        changeColor();

        setCountClick(1);
        setPointer(false);
      }
    }

  }

function PictureCategory(image) {
    switch (PictureTopic) {
      case "Girl":
        const XG = POx1 - (0.5 * widthSize) < 0 ? 0 : POx1 - (0.5 * widthSize);
        const newWidth= 2.4*widthSize;
        const newheight= 2.5*widthSize;
        ctxRef.current.clearRect(XG, POY1, newWidth, newheight);
        ctxRef.current.drawImage(image, XG, POY1, 2.4 * widthSize, 2.5 * heightSize);

        return[{x: XG,y:POY1,width:newWidth,height:newheight}]
      default:
        ctxRef.current.drawImage(image, POx1, POY1, widthSize, heightSize);
        break;
    }
    


  }

Answer 2

不確定它是否會解決您的問題，但無論如何都必須執行以下操作。

它應該是

setCountClick(countClick=> countClick + 1);

當 state 使用其先前的值更新時，應使用 state 設置器的回調參數。

請參閱https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous