Javascript 在react中等待函数

我有一个问题，我的函数在另一个函数结束之前运行。 我尝试在GetEntries中运行函数GetCategories，但这对我不起作用

GetEntries仅适用于空字符串，因为函数执行得太早。虽然useEffect函数中有类别，但该函数不是rerender。请帮忙

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

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

---

如果希望全局持久化状态，请不要将react功能组件用作普通函数，也不要使用react上下文

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]);
    ...

---

如果希望全局持久化状态，请不要将react功能组件用作普通函数，也不要使用react上下文

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]);
    ...

---

另一个答案的回调版本：

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

导出默认函数CFramework（）{
const[categories，setCategories]=useState（[]）；
const[entries，setEntries]=useState（[]）；
useffect（（）=>{
const title=GetCategories（）。然后（（）=>{
//等待GetCategories=^
const entries=GetEntries（title）；
});
}, []);
返回
{year}

标题：{Title}

条目：{Entries}

因子：{Factor}

}

---

旁注：您需要调整实用程序函数/服务以返回另一个答案的回调版本：

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

导出默认函数CFramework（）{
const[categories，setCategories]=useState（[]）；
const[entries，setEntries]=useState（[]）；
useffect（（）=>{
const title=GetCategories（）。然后（（）=>{
//等待GetCategories=^
const entries=GetEntries（title）；
});
}, []);
返回
{year}

标题：{Title}

条目：{Entries}

因子：{Factor}

}

---

旁注：您需要调整实用程序函数/服务以返回承诺

如果我尝试此操作，我会得到一个无效的钩子调用，因为我在GetCategories中使用钩子。很容易修复？如果我尝试这个，我会得到一个无效的钩子调用，因为我在GetCategories中使用钩子。它很容易修复？