Question 203655 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why can't I reset my array with setState?

In my camera component, I want to upload the photos to a storage bucket every 3 photos. I use state in react to save my image blobs to an array. Everything works perfectly for the first 3 photos but afterward, I am not able to reset my array to be empty again and a seemingly random number of photos is uploaded to my bucket.

  let [blobs, setBlobs] = useState([]);

  const capturePhoto = async () => {
    const photo = await camera.current.takePhoto();
    fetch(photo.path)
      .then(res => {
        setBlobs([...blobs, res._bodyBlob]);
        console.log('blobs', blobs.length, blobs);
      })
      .catch(err => {
        console.log('err', err);
      });
    checkLength();
  };

  const checkLength = async () => {
    if (blobs.length >= 2) {
      // upload files to a folder with the current date in a firebase cloud bucket
      const datestring = new Date().toLocaleString('de-DE');
      blobs.forEach((blob, i) => {
        uploadFile(blob, datestring + '/' + (i + 1) + '.jpg');
      });
      // reset state
      setBlobs([]);
      sendNotification('Photos uploaded');
      toggleDialog();
    }
  };

I console logged my array and the size only increases. Also, it starts console logging with zero although I already added an element likely because setState() is asynchronous.
I tried to await the reset by wrapping it in a promise, but that sadly did not work either.
How can I upload the blobs to the cloud once there are 3 of them and reset the list afterward?

Tags:

2

Answers


  1. 0

    Looks like three things:

    1. The fetch call is not awaited, checkLength is called before the fetch completes.
    2. You don’t get the new value of setState until the next render. This is a fundamental idea of React (debatable whether it’s a good idea), state values are immutable during a render. setState just gives the next immutable state that will be used by the next render.
    3. When setState depends on the previous state, you should pass a callback to setState instead of using the current value directly. As an example, say you have an empty array, you call fetch once, then again before the first one completes. Both of these setState calls would be referencing the empty array when doing ...blobs. By passing a callback, setState gets the most recent value passed in as a parameter. More info: https://react.dev/reference/react/Component#setstate

    Easiest solution is to pass the array as a parameter to checkLength inside of the setState callback.

    Here’s with .then() as in the question:

      const capturePhoto = async () => {
    const photo = await camera.current.takePhoto();
    fetch(photo.path)
      .then(res => {
        setBlobs(prev => {
          const newBlobs = [...prev, res._bodyBlob];
          console.log('blobs', newBlobs.length, newBlobs);
          checkLength(newBlobs);
          return newBlobs;
        });
      })
      .catch(err => {
        console.log('err', err);
      });
  };

    and here’s with async await

      const capturePhoto = async () => {
    const photo = await camera.current.takePhoto();
    const res = await fetch(photo.path).catch(console.error);
    setBlobs(prev => {
      const newBlobs = [...prev, res._bodyBlob];
      console.log('blobs', newBlobs.length, newBlobs);
      checkLength(newBlobs);
      return newBlobs;
    });
  };

    checkLength

      const checkLength = async (newBlobs) => {
    if (newBlobs.length >= 2) {
      // upload files to a folder with the current date in a firebase cloud bucket
      const datestring = new Date().toLocaleString('de-DE');
      newBlobs.forEach((blob, i) => {
        uploadFile(blob, datestring + '/' + (i + 1) + '.jpg');
      });
      // reset state
      setBlobs([]);
      sendNotification('Photos uploaded');
      toggleDialog();
    }
  };
    Login or Signup to reply.
  2. 0

    So it does come down to how your code executes, specifically the asyncronous nature of setState so what you can do is use the callback form of setState. Here is an example:

    setBlobs(prevBlobs => [...prevBlobs, res._bodyBlob]);

    Here’s a complete example with the rest of the code:

    const capturePhoto = async () => {
  const photo = await camera.current.takePhoto();
  fetch(photo.path)
    .then(res => {
      setBlobs(prevBlobs => [...prevBlobs, res._bodyBlob]);
      console.log('blobs', blobs.length, blobs);
    })
    .catch(err => {
      console.log('err', err);
    });
  checkLength();
};

const checkLength = async () => {
  if (blobs.length >= 2) {
    // upload files to a folder with the current date in a firebase cloud bucket
    const datestring = new Date().toLocaleString('de-DE');
    blobs.forEach((blob, i) => {
      uploadFile(blob, datestring + '/' + (i + 1) + '.jpg');
    });
    // reset state
    setBlobs([]);
    sendNotification('Photos uploaded');
    toggleDialog();
  }
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search