React hooks - Update State in function

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, i change the state's that user get to me and Use them. but after the first setSate for all these State i can't update and or change them. these are my code's:

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

  }

and this is my PictureCategory() function: For convenience, I only took one of the modes

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


  }

i want to change state's with above function please help me !!!

Answer 1

i know it's not your answer for this question. but you can use this codes for have new value. I stored the new values in an object and returned them:

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

Not sure if it'll fix your issue, but the following has to be done in any case.

It should be

setCountClick(countClick=> countClick + 1);

When state is updated using its previous value, the callback argument of the state setter should be used.

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