Question

0

84

Vistas

Javascript async-mutex does not seem to lock properly

I am using [async-mutex](https://github.com/DirtyHairy/async-mutex because there is a race condition in my code from concurrent requests returning. And upon all of the concurrent requests resolving, they each need to add something from the response into a state array.

I have included a codesandbox replicating this issue: https://codesandbox.io/s/runtime-haze-2407uy

I will also post the code here for reference:

import Uppy from "@uppy/core";
import XHRUpload from "@uppy/xhr-upload";
import { DragDrop, ProgressBar } from "@uppy/react";
import { Mutex } from "async-mutex";

import { useEffect, useMemo, useRef, useState } from "react";

export default function App() {
  const [stuff, setStuff] = useState([]);
  const uppy = new Uppy({
    meta: { type: "file" },
    autoProceed: true
  });
  uppy.use(XHRUpload, {
    endpoint: `google.com/upload`
  });

  const mutex = new Mutex();

  uppy.on("upload-error", (_, response) => {
    mutex.acquire().then((release) => {
      let joined = stuff.concat("test");
      setStuff(joined);
      console.log(stuff);
      release();
    });
  });
  return (
    <div className="App">
      <DragDrop
        uppy={uppy}
        locale={{
          strings: {
            // Text to show on the droppable area.
            // `%{browse}` is replaced with a link that opens the system file selection dialog.
            dropHereOr: "Drop here or %{browse}",
            // Used as the label for the link that opens the system file selection dialog.
            browse: "browse"
          }
        }}
      />
    </div>
  );
}

I expect, when uploading two files (the upload server is bogus but that is intended, because all requests (one per file) will trigger the upload-error event) that the stuff array will end up like ['test', 'test']. However, that does not happen:

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-03T04:21:29.153Z

The reason for this is because the "state" (no pun intended) of the stuff state is uncertain at the time of running setState, due to the nature of setStuff and state setters in general being asynchronous.

The solution is to

a) use await because in any case the mutex lock acquisition is a promise

b) pass a lambda function into setStuff that guarantees the state of stuff will be up to date, as opposed to just assuming stuff will be up to date (which it won't be)

    uppy.on('upload-error',  async (_, response) => {
        await mutex.acquire().then((release) => {
            setStuff((prevState => {
                return prevState.concat('test');
            }));
            release();
        });
    })

For more information, check out https://stackoverflow.com/a/44726537/8652920