Set const state inside a async function

Question

What's up, everyone! I'm trying to set process constant state inside an async function. Everytime the button is clicked, the method plotCurves is called.

const [process, setProcess] = useState("");

const plotCurves = (selectedMoldingTask) => {
    async function getData() {
      const process = await APIConsumer("/process-by-molding-task-process/" + 
                                 selectedMoldingTask["Process"]);
      console.log("Process inside async", process);
      setProcess(process);
    }
    getData();
    console.log("Process outside async", process);
};

The time I click in the button, the constant process (the one outside the async function) still stores its initial state "" and doesn't store the value returned from API, which was supposed to do.

But if I click in the button again, process is not "" anymore and it stores the value returned from API.

I'm pretty sure the fact that getData is an async function has something to do with it, but as I'm a new React/Javascript developer, I'm not that much aware of it!

The APIConsumer component:

export default async function APIConsumer(route) {
  const baseUrl = "http://127.0.0.1:5000";
  const { data } = await axios.get(baseUrl + route);
  return data;
}

I would like to know how I can properly fix it!

Try moving you `useState` hook inside the component. Hooks need to be declared inside functional components at the top. — Kyle Lambert, Nov 06 '20 at 13:57
The hook is declared inside a functional component, I just didn't show the entire functional component here :P — Lit2000hania, Nov 06 '20 at 14:01
It is not mutating as the constant process inside the async fuction will just be in the async function scope — Lit2000hania, Nov 06 '20 at 14:12
setState does not change the state immediately because it is async. Check this link: https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately — Ozgur Sar, Nov 06 '20 at 14:14
To get the desired output, you can use useEffect() and watch for the process state changes. When it's changed, you can then console log the output. — Ozgur Sar, Nov 06 '20 at 14:16

Set const state inside a async function

0 Answers0