Question 73696 in Reactjs Question posted in
The new location for the React Documentation can be found here.

UseEffect is not triggering – Reactjs

so i used useeffect in my project and for some reason it ain’t working. anyone that knows if i did. it is specifically the useeffect that is not triggering. the Console.log("Hi") does trigger everywhere else outside of useeffect.

const [openRequests, setOpenRequests] = useState([]);
  const [answeredRequests, setAnsweredRequests] = useState([]);
  const [closedRequests, setClosedRequests] = useState([]);
  const [assignments, setAssignments] = useState([]);
  const [CompleteAssignments, setCompleteAssignments] = useState<
    CompleteAssignment[]
  >([]);

  const [omzet, setOmzet] = useState<number>(0);
  const [vooruitzicht, setVooruitzicht] = useState<number>(0);

  const history = useHistory();

  const BTN_AS = document.getElementById("Opdrachten");
  const BTN_OP = document.getElementById("OpenAanvragen");
  const BTN_WE = document.getElementById("GeweigerdeAanvragen");
  const BTN_GE = document.getElementById("GeslotenOpenAanvragen");
  const OmzetText = document.getElementById("OmzetText");

  const hide = (ID: string) => {
    let x = document.getElementById(ID);
    switch (ID) {
      case "Opdrachten":
        if (x!.style.display === "none") {
          x!.style.display = "block";
          BTN_OP!.style.display = "none";
          BTN_WE!.style.display = "none";
          BTN_GE!.style.display = "none";
        } else {
          x!.style.display = "none";
        }
        break;
      case "OpenAanvragen":
        if (x!.style.display === "none") {
          x!.style.display = "block";
          BTN_AS!.style.display = "none";
          BTN_WE!.style.display = "none";
          BTN_GE!.style.display = "none";
        } else {
          x!.style.display = "none";
        }
        break;
      case "GeweigerdeAanvragen":
        if (x!.style.display === "none") {
          x!.style.display = "block";
          BTN_AS!.style.display = "none";
          BTN_GE!.style.display = "none";
          BTN_OP!.style.display = "none";
        } else {
          x!.style.display = "none";
        }
        break;
      case "GeslotenOpenAanvragen":
        if (x!.style.display === "none") {
          x!.style.display = "block";
          BTN_AS!.style.display = "none";
          BTN_WE!.style.display = "none";
          BTN_OP!.style.display = "none";
        } else {
          x!.style.display = "none";
        }
        break;
    }
  };

  useEffect(() => {
    async () => {
      console.log("hi");
      let completeAssignments: CompleteAssignment[] =
        await asyncCallApiByApiTag("getApiCompanyAanvragenGeslotenCompany");
      let openResults = await asyncCallApiByApiTag(
        "getApiCompanyRequestsOpenList"
      );
      let answeredResults = await asyncCallApiByApiTag(
        "getApiCompanyRequestsAnsweredList"
      );
      let closedResults = await asyncCallApiByApiTag(
        "getApiCompanyRequestsClosedList"
      );
      setOpenRequests(openResults);
      setAnsweredRequests(answeredResults);
      setClosedRequests(closedResults);
      setCompleteAssignments(completeAssignments);

      // console.log(CompleteAssignments);
      let result = await asyncCallApiByApiTag("getApiCompanyAssignmentsList");
      setAssignments(result);
      completeAssignments.map((result: any, index) => {
        completeAssignments.forEach((e) => {
          if (result["assignment"]["completedRequest"] == true) {
            console.log("brrrrrr");
            setOmzet(
              e["quotation"]["hoursPrice"] + e["quotation"]["materialPrice"]
            );
          }
        });
      });
      completeAssignments.map((result: any, index: number) => {
        completeAssignments.forEach((e: any) => {
          if (result["assignment"]["completedRequest"] == false) {
            console.log(completeAssignments);
            setVooruitzicht(
              e["quotation"]["hoursPrice"] + e["quotation"]["materialPrice"]
            );
          }
        });
      });
    };
  }, []);

what this should basically do is. get the data from my C# database and put that into the tables and display the price of stuff on the top. everything renders but the useeffect. so the whole functionality doesn’t work now.

Tags:

3

Answers


  1. 0

    You have written a function inside useEffect, there could have been a code block directly, instead of another function definition, or at least an IIFE.

    Login or Signup to reply.
  2. 0

    If you want to call an async func inside an useEffect, you need to define it and then call it. In your example, it seems that you forgot to call it

    useEffect(() => {
   const fetch = async () => {
      // Your async code
      return []
   }
   fetch()
}, [])
    Login or Signup to reply.
  3. 0

    It is executing. But… What is it doing? Stripping out all of the other code, your useEffect function contains this structure:

    async () => {
  console.log('hi');
};

    Which successfully executes. But what does it do? It defines an anonymous function which is never executed. So your code is successfully… defining a function.

    Presumably you meant to also execute that function. Which you can do by making it an IIFE:

    (async () => {
  console.log('hi');
})();

    Or perhaps giving the function a name and invoking it from that name:

    const myFunc = async () => {
  console.log('hi');
};
myFunc();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search