React - useEffect based on another useEffect-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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()
    }, [])