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 !!!

Does this answer your question? The useState set method is not reflecting a change immediately — Brian Thompson
– Brian Thompson, Commented Aug 30, 2022 at 13:57
Have you ever tried to make the above functions the ones using useCallback? — Bikas Lin
– Bikas Lin, Commented Aug 30, 2022 at 13:57
@BikasLin i use it for PictureCategory like : const PictureCategory = useCallback((image) =>{// codes},[POY1,POx1,widthSize,heightSize,PictureTopic]) and it's not working — Masir
– Masir, Commented Aug 30, 2022 at 14:22
@BrianThompson it's close but i want setstate with my function, i have switch case and i call this function in another function and give it a image — Masir
– Masir, Commented Aug 30, 2022 at 14:26
Is PictureCategory a Component? By the way only classes & components should be in PascalCase. Variables & functions should be in camelCase. — Nice Books
– Nice Books, Commented Aug 30, 2022 at 16:30

Nice Books · Accepted Answer · 2022-08-30 16:43:02Z

1

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

answered Aug 30, 2022 at 16:43

Nice Books

1,8812 gold badges19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Masir Over a year ago

no it's not working ):

Mohsen.RJ · Accepted Answer · 2022-08-31 07:54:13Z

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


  }

oh man thanks it's worked ,but i still waiting to get the right answer (:

Collectives™ on Stack Overflow

React hooks - Update State in function

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related