反应钩子 - 在 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