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

Reactjs – React two API calls within useEffect

When I press Ctrl + S in VSCode, my code with two API calls inside a useEffect hook works fine. However, when I reload my web browser (Safari), only one of the API calls finishes. Why does this occur? I get no error response or something that indicates that there is a problem. Have I misunderstand how useEffect works?

import React, { useState, useContext, useEffect } from "react"
import { AccountContext } from "../../context"
....

export default function GradingAfter() {
    const context = useContext(AccountContext)
    const { token, userId } = context
    const [grading, setGrading] = useState([])
    const [beltInfo, setBeltInfo] = useState({
        belt_name: "",
        color: "" // Assuming color is directly usabl
    })
    const grading_id = 7

    useEffect(() => {
        async function fetchData() {
            try{
                const grading_response = await fetch(`/api/examination/grading/${grading_id}`, {
                    method: "GET",
                    headers: { token }
                })
                
                if (!grading_response.ok) {
                    throw new Error("Network response was not ok")
                }    
                const grading_data = await grading_response.json()
                setGrading(grading_data)
    
                const belt_response = await fetch("/api/belts/all", {
                    method: "GET",
                    headers: { token }
                })
                
                if (!belt_response.ok) {
                    throw new Error("Network response was not ok")
                }
                const belt_data = await belt_response.json()
                console.log("Belt data:", belt_data)
                
            } catch (error) {
                console.error("There was a problem with the fetch operation:", error)
            }
        }
        fetchData()
    },[])
    return(...)
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This implementation solved my problems.

    const fetchGrading = () => {
    return fetch(`/api/examination/grading/${grading_id}`, {
        method: "GET",
        headers: { token }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error("Network response was not ok")
        }
        return response.json()
    })
}

const fetchBelts = () => {
    return fetch("/api/belts/all", {
        method: "GET",
        headers: { token }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error("Network response was not ok")
        }
        return response.json()
    })
}

useEffect(() => {
    const fetchData = async () => {
        try {
            const [grading_data, belt_data] = await Promise.all([
                fetchGrading(),
                fetchBelts()
            ])
            setGrading(grading_data)
            console.log("Grading data:", grading_data)
            updateDate(grading_data.created_at)
            const matchingBelt = belt_data.find(belt => belt.id === grading_data.belt_id)
            if (matchingBelt) {
                setBeltInfo({
                    belt_name: matchingBelt.name,
                    color: "#" + matchingBelt.color
                })
            }
        } catch (error) {
            console.error("There was a problem with the fetch operation:", error);
        }
    }
    fetchData()
}, [])

  2. 0 
    useEffect(() => {
let isMounted = true; // Flag to track if component is mounted

async function fetchData() {
    try {
        const grading_response = await 
        fetch(`/api/examination/grading/${grading_id}`, {
            method: "GET",
            headers: { token }
        })
        
        if (!grading_response.ok) {
            throw new Error("Network response was not ok")
        }    

        const grading_data = await grading_response.json()
        if (isMounted) { // Check if component is still mounted before updating state
            setGrading(grading_data)
        }

        const belt_response = await fetch("/api/belts/all", {
            method: "GET",
            headers: { token }
        })
        
        if (!belt_response.ok) {
            throw new Error("Network response was not ok")
        }

        const belt_data = await belt_response.json()
        if (isMounted) { // Check if component is still mounted before updating state
            setBeltInfo(belt_data)
        }
        
    } catch (error) {
        console.error("There was a problem with the fetch operation:", error)
    }
}

fetchData();

return () => {
    isMounted = false;
};
}, []);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search