Waiting for a function in react

Question

I have the problem, that my function runs, before the other one ends. I tried to runs the function GetCategories in GetEntries, but that doesn't work for me.

GetEntries only works with an empty string because the functions is executed too early. Although there are categories in the useEffect function, the function is not rerender. Please help.

import ...


export default function CFramework() {
  const year = GetYears();
  const title = GetCategories();
  const entries = GetEntries(title);
  const factor = GetFactor(title);

  return 
    <>
      <p>{year}</p>
      <p>Title: {title}</p>
      <p>Entries: {entries}</p>
      <p>Factor: {factor}</p>
   </>

GetCategories:

import { useState, useEffect } from "react";
import Parse from "parse";

function GetCategories() {
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    getCategories();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  async function getCategories() {
    const Categories = Parse.Object.extend("BerechnungsKategorie");
    const query = new Parse.Query(Categories);
    await query.find().then(function (results) {
      results.forEach((e) => {
        categories[parseInt(e.get("ID"))] = e.get("Name");
      });
    });
    setCategories([...categories]);
  }
  return categories;
}

export default GetCategories;

GetFactor:

import { useState, useEffect } from "react";
import Parse from "parse";
import GetCategories from "./GetCategories";

export default function GetEntries(categories) {
  const [entries, setEntries] = useState([]);


  useEffect(() => {
    async function getValues() {
      categories.forEach((c, index) => {
        getEntries(c, index);
      });

      async function getEntries(category, index) {
        var temp = [];
        var q = new Parse.Query("BerechnungsKategorie");
        q.equalTo("Name", category);
        var results = await q.find();
        results.forEach((element, index) => {
          var q = new Parse.Query("BerechnungsEintrag");
          q.equalTo("Kategorie", category);
          q.find().then(function (category) {
            category.forEach((e, index) => {
              temp[index] = e.get("Name");
            });
            entries[index] = temp;
            if (entries.length === categories.length) {
              setEntries([...entries]);
            }
          });
        });
      }
    }
    getValues();
    console.log(categories);

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, categories);

  return entries;
}

Chamal Silva · Accepted Answer · 2021-05-01 12:06:44Z

1

Don't use react functional components as normal functions or use react context if you want persist the state globally

const [categories, setCategories] = useState([]);
    const [categories, setCategories] = useState([]);
      const [entries, setEntries] = useState([])
    
      const fetchData = async () => {
        const title = await getCategories();
        const entries = getEntries(title); // create function accroiding to that
      };
    
      useEffect(() => {
        fetchData();
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, [categories]);
    ...

answered May 1, 2021 at 12:06

Chamal Silva

735 bronze badges

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

Comments

T J · Accepted Answer · 2021-05-01 12:08:52Z

1

The callback version of the other answer:

export default function CFramework() {
  const [categories, setCategories] = useState([]);
  const [entries, setEntries] = useState([]);

  useEffect(() => {
    const title = GetCategories().then(() => {
       // wait for GetCategories=^
        const entries = GetEntries(title);
    });
  }, []);

  return 
    <>
      <p>{year}</p>
      <p>Title: {title}</p>
      <p>Entries: {entries}</p>
      <p>Factor: {factor}</p>
   </>
}

Side note: you need to adjust the utility functions/services to return promises

answered May 1, 2021 at 12:08

T J

43.2k13 gold badges87 silver badges142 bronze badges

1 Comment

lomu98 Over a year ago

If I try this, I get an invalid hook call, cause I use hooks in GetCategories. It is easy to fix?

Collectives™ on Stack Overflow

Waiting for a function in react

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related