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