How to specify order for useEffect() in React?-CodePudding

I have a doubt about React. I have two functions in

import { useState, useEffect } from 'react'
import './transactions.css'

function TransactionHistory () {
  const [last_account_id, setAccountId] = useState();
  const http_request = async url => {
    try {
      const response = await fetch(url, {
        method: 'GET',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json'
        }
      });
      if (response.status === 200) {
        return [true, response];
      }
    } catch (error) {
      console.log(error);
      return [false, null];
    }
  }

  const get_transactions = async () => {
    let transactions_promise = new Promise((resolve, reject) => {
      let transactions = http_request('http://127.0.0.1:8000/transactions');
      resolve(transactions);
    });
    let transactions_response = await transactions_promise;
  }

  const get_account_details = async () => {
    let url = 'http://127.0.0.1:8000/accounts/'   last_account_id;
    let account_promise = new Promise((resolve, reject) => {
      let account = http_request(url)
      resolve(account)
    })
    let account_response = await account_promise
  }

  const run_apis = async () => {
    await get_transactions();
    await get_account_details();
  }


  useEffect(() => {
    run_apis()
  }, [last_account_id])
  return ()
}

export default TransactionHistory

I am getting a bad request initially from get_account_details() and failing my test cases. But it works after. The useState last_account_id is not defined initially and that is causing the bad request.

Please help me figure out a solution.

CodePudding user response：

The key to understanding this question comes from a comment on another answer, quoted here:

Bad request error comes from funct2() due to a useState not defined in funct1()

Then you are triggering funct2 in response to the wrong thing. If you need it to run when a state is defined, then you should make it run in response to that state changing by putting it in its own effect hook.

const [someState, setSomeState] = useState(null);

useEffect(() => {
    func1();
}, []); // Note the addition of the dependency array so that this only runs when the component is initially mounted

useEffect(() => {
    if (someState === null) return; // Don't run funct2 if the state hasn't been set yet
    funct2();
}, [someState]); // Note that we run this function whenever the state is changed

Alternatively, you could have funct1 return the value (possibly via an awaited promise), then pass that value to funct2 and then read the value from the arguments instead of the state (because the old value of the state would have been closed over at that point).

CodePudding user response：

You can wait for the function to finish with await

const executeFns = async () => {
  await funct1();
  await funct2();
};

// Then in your effect you can call your "executeFns"
useEffect(() => {
  executeFns();
}, []);