React - useEffect based on another useEffect

Question

I'm trying to understand how useEffect works.

I have two callApi: "callApiDialer" is based on response of "callApiManager", for get id from list.

But "currentLeadId" state at first called obviously is null.

How can call "callApiDialer" when currentLeadId is not null?

import React, { useState, useEffect } from 'react';
    
    const [loading, setLoading] = useState(true);
    const [apiManager, setApiManager] = useState([]);
    const [apiDialer, setApiDialer] = useState([]);
    const [currentLeadId, setCurrentLeadId] = useState(null);
    
        // CALL API
        const callApiManager = async () => {
            try {
                const response = await api.get(`/api/manager/op/1`);
                setCurrentLeadId(response.data.dialer_list[0].id);
                setApiManager(response.data);
            } catch (err) {
                alert("fetchApiManager " + err.response.status);
            }
        }
    
        const callApiDialer = async () => {
            try {
                const response = await api.get(`/api/manager/lead/${currentLeadId}`);
                setApiDialer(response.data.lead);
                setLoadingModal(false);
            } catch (err) {
                alert("fetchApiSources " + err.response.status);
            }
        }
    
        useEffect(() => {
            callApiManager();
        }, [])
    
        useEffect(() => {
           console.log(currentLeadId); // <-- here get first null and after currentLeadId
           if(currentLeadId) {
             callApiDialer();
             setLoading(false);
            }
        }, [currentLeadId])

Isn't that what the code already does? I would expect if(currentLeadId) { to only execute when currentLeadId is not null. — David
– David, Commented Aug 26, 2022 at 11:33

Emílio Gularte Kipper · Accepted Answer · 2022-08-26 12:00:18Z

1

You could have just one function that call both, therefore there would be only one useEffect.

    // CALL API
    const callBothApisAtOnce= async () => {
        try {
            const op = await api.get(`/api/manager/op/1`);
            const response = await api.get(`/api/manager/lead/${op.data.dialer_list[0].id}`);
            // rest of your logic...
        } catch (err) {
            alert("err" + err);
        }
    }

    useEffect(() => {
       callBothApisAtOnce()
    }, [])

answered Aug 26, 2022 at 12:00

Emílio Gularte Kipper

687 bronze badges

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

Comments

Prosenjit Chongder · Accepted Answer · 2022-08-26 11:50:09Z

0

you can use axios's promise base functionality

axios.get(`/api/manager/op/1`).then(res => {
   setCurrentLeadId(response.data.dialer_list[0].id);
   setApiManager(response.data);
   axios.get(`/api/manager/lead/${response.data.dialer_list[0].id}`).then(res1 =>{
   setApiDialer(res1.data.lead);
   setLoadingModal(false);
  }
}

answered Aug 26, 2022 at 11:50

Prosenjit Chongder

1146 bronze badges

Collectives™ on Stack Overflow

React - useEffect based on another useEffect

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related