when I fetch data from my api successfully, I can display it using console.log, but somehow after I use a setState, the state still keeps the previous data. so when the page loads, the console.log(data) has an array of object containing data from the api, but console.log(rute) after the setRute still returns empty array. why is that?
this is my code
const MasterRute = () => {
const [rute, setRute] = useState([]);
const getRute = async () => {
const response = await fetch('http://localhost:8080/rute');
const data = await response.json();
// console.log(data); // [{id:"1", name:"AAA"}, {id: "2", name: "BBB"}]
setRute(data);
// console.log(rute); // [] ===> why is this empty?
}
}
any help is appreciated
useState is asynchronous, so you won't see changes after setRute. You need to wait for the component re-rendered completely
const MasterRute = () => {
const [rute, setRute] = useState([]);
const getRute = async () => {
const response = await fetch('http://localhost:8080/rute');
const data = await response.json();
// console.log(data); // [{id:"1", name:"AAA"}, {id: "2", name: "BBB"}]
setRute(data);
}
console.log(rute); //data updated on rendering
}
You can check this article for a better understanding
If you still really want to see data after setRute. You can get the result within setTimeout
const MasterRute = () => {
const [rute, setRute] = useState([]);
const getRute = async () => {
const response = await fetch('http://localhost:8080/rute');
const data = await response.json();
// console.log(data); // [{id:"1", name:"AAA"}, {id: "2", name: "BBB"}]
setRute(data);
setTimeout(() => {
console.log(rute); //data updated
})
}
}
Related
I am hosting a react app in aws amplify using the aws-serverless version of express as the REST API, which sits inside of a lambda function. A big problem that I am facing is that asynchronous jobs in aws-serverless express cause the lambda function to complete before the promises resolve. Leaving me with no data and no error handling. This caused me to bring a lot of the asynchronous work to the front end of the application.
The problem here is that I need to bring a large amount of data into state. Right now, I am using a delay workaround (shown below) but instead need a programatic way to make sure state is finished updating before being used in the second useEffect hook (dependent on odds & failedTries props) instead of using the delay functionality.
Any help would be greatly appreciated.
const App = ({ signOut }) => {
const [odds, setOdds] = useState([]);
const [updateTime,setUpdateTime] = useState(0);
const [failedTries,setFailedTries] = useState(0);
useEffect(() => {
const setNflOdds = async () => {
let response = await updateNflOdds();
let data = response;
setOdds(data);
};
setNflOdds();
setUpdateTime(1);
const interval = setInterval(() => {
setNflOdds();
setUpdateTime(updateTime => updateTime +1);
}, 100000);
return () => clearInterval(interval);
}, []);
useEffect(() => {
const s3Push = (() => {
if(!odds.length) {
setFailedTries(failedTries => failedTries + 1);
} else {
const delay = ms => new Promise(res => setTimeout(res, ms));
const nflOddsRefDelay = async() => {
*//This is the current workaround, wait ten seconds before pushing odds state up to the s3 bucket*
await delay(10000);
oddsS3Helper(odds);
};
nflOddsRefDelay()
}
});
s3Push();
}, [odds, failedTries]);
With the above indicated delay workaround this works for my use case (13k records inside of the array) but the data size is highly variable and I want to figure out a way that no matter the data size it brings the entire call up to the s3 bucket.
below is the content of the functions being called in the useEffect hook
const pushToS3 = async ( file, key ) => {
const creds = await Auth.currentCredentials()
const REGION = {region};
const s3Client = new S3Client({
credentials: Auth.essentialCredentials(creds),
region: REGION
});
const params = {
Bucket: {s3 bucket name}
Key: key,
Body: file,
};
s3Client.send(new PutObjectCommand(params));
console.log("file is sent");
};
const oddsS3Helper = (async (odds) => {
console.log("inside s3 helper: ",odds);
let csv = '';
let headers = Object.keys(odds[0]).join(',');
let values = odds.map(odd => Object.values(odd).join(',')).join('\n');
csv += headers + '\n' + values;
const buffedFile = csv;
const key = 'nflprops.csv'
const delay = ms => new Promise(res => setTimeout(res, ms));
const propRefDelay = async() => {
await delay(5000);
await postNflOdds();
};
pushToS3( buffedFile, key );
await propRefDelay();
});
async function getNflGames() {
const apiName = {name of serverless API inside of lambda};
const path = {path name};
const init = {
headers: {} // OPTIONAL
};
const data = await API.get(apiName, path, init);
return data;
};
async function getNflOdds(gameId) {
const apiName = {name of serverless API inside of lambda};
const path = {path name};
const init = {
headers: {}, // OPTIONAL
body: { gameId }
};
const data = await API.post(apiName, path, init);
return data;
};
async function updateNflOdds() {
const ojNflGames = await getNflGames();
const nflGameProps = [];
const nflOddsPush = ( async () => {
try {
await ojNflGames.data.map( async (game) => {
const ojNflOdds = await getNflOdds(game.id)
await ojNflOdds.data[0].odds.map((line) => {
nflGameProps.push(
{
gameId: game.id,
oddsId: line.id,
sports_book_name: line.sports_book_name,
name: line.name,
price: line.price,
checked_date: line.checked_date,
bet_points: line.bet_points,
is_main: line.is_main,
is_live: line.is_live,
market_name: line.market_name,
home_rotation_number: line.home_rotation_number,
away_rotation_number: line.away_rotation_number,
deep_link_url: line.deep_link_url,
player_id: line.player_id,
}
);
});
});
} catch (err) {
console.log("there was an error", err);
}
});
try {
await nflOddsPush();
} catch(err) {
console.log("odds push errored: ", err);
}
console.log("inside of updateNflOdds function: ",nflGameProps);
return nflGameProps;
};
So i have this function that i want to run once when the app start. This function task is to create userId then i will run another function to fetch data from firebase with the userId that created before. But the fetch function didn't start or it didnt do the task well, there is no sign of error, that's what make it more confusing. If i press the fetch function by button it work correctly.
the state
const [task, setTask] = useState(); // bisa di sebut sebagai controller text input
const [taskItems, setTaskItems] = useState([]); // state untuk list task
const [userId, setUserId] = useState();
const [isLoading, setIsLoading] = useState(true);
const baseUrl =
'https://react-http-post-RANDOM_KEY-default-rtdb.firebaseio.com/task/' + userId;
this is function to create userId function on init app
const handleCreateUser = async () => {
setIsLoading(true);
try {
const value = await AsyncStorage.getItem('userId');
if (value !== null) {
setUserId(value);
} else {
const uniqueId = makeid(6);
await AsyncStorage.setItem('userId', 'user' + uniqueId);
setUserId('user' + uniqueId);
}
await fetchDatabase();
} catch (error) {
console.log('errorrr AsyncStorage' + error);
}
setIsLoading(false);
};
this is function to fetch data from firebase
const fetchDatabase = async () => {
console.log('infinite looping');
try {
const response = await fetch(baseUrl + '.json');
if (!response.ok) {
throw new Error('Something went wrong!');
}
const data = await response.json();
// looping Map/Object dengan key sebagai indexnya
const loadedTask = [];
for (var id in data) {
loadedTask.push({
key: id,
text: data[id].text,
isComplete: data[id].isComplete,
});
}
setTaskItems(loadedTask);
} catch (error) {
setError(error.message);
}
};
this is how i call the useEffect
useEffect(() => {
handleCreateUser();
}, []);
The first thing I see is that you are not using await correctly. It should be before fetchDatabase(); function that is inside handleCreateUser like so:
await fetchDatabase();
The word await is there when you have to call an asynchronous function and you have to wait for this function to be completed.
Edit
To use only one useEffect you can check if your fetch function received your data by:
// or whatever statusCode you get when the data are present
if(reponse.statusCode === 200) {
// the await is not needed because it is present for the reponse abov
const data = response.json();
// looping Map/Object dengan key sebagai indexnya
const loadedTask = [];
for (var id in data) {
loadedTask.push({
key: id,
text: data[id].text,
isComplete: data[id].isComplete,
});
}
setTaskItems(loadedTask);
}
i got the answer, by using 2 useEffect
useEffect(() => {
handleCreateUser();
}, []);
useEffect(() => {
fetchDatabase();
}, [userId]);
I'm fetching data from a json. And i want to display that data in my React component.But every time I try to pass the objects that I return from the json to my state, it returns only one and delete the previous, instead of the entire elements inside the json.
This is my code.
const [state, setState] = useState({});
const connection = new Connection("devnet");
const { publicKey } = useWallet();
useEffect(() => {
(async () => {
//if not public key, close
if(!publicKey) return;
//get tokens
let response = await connection.getTokenAccountsByOwner(
publicKey!, // owner here
{
programId: TOKEN_PROGRAM_ID,
}
);
response.value.forEach((e) => {
const accountInfo = SPLToken.AccountLayout.decode(e.account.data);
//get only tokens with value of 1
if ( parseInt(`${SPLToken.u64.fromBuffer(accountInfo.amount)}`) === 1 ) {
const tokenPublicKey = `${new PublicKey(accountInfo.mint)}`
//get the metadata of each NFT
const run = async () => {
const ownedMetadata = await programs.metadata.Metadata.load(connection, await programs.metadata.Metadata.getPDA(tokenPublicKey));
//get only tokens of the collection ...
if (ownedMetadata.data.updateAuthority === "Address_authority") {
//show the json data from arweave
let url= ownedMetadata.data.data.uri;
fetch(url)
.then(res => res.json())
.then((out) => {
setState(prevState => {
// THIS IS NOT WORKING FOR ME :(
return {...prevState, ...out};
});
})
.catch(err => { throw err });
}
};
run();
}
});
})()
}, [connection, publicKey]);
console.log(state)
{...prevState, ...out}; creates a new object, puts all of prevState's own properties on the new object, then puts all of out's own properties on the new object (overwriting the values from prevState if prevState also had properties with those names).
It sounds like you want an array, not a single object:
const [state, setState] = useState([]);
Then setting:
setState(prevState => [...prevState, out]);
Possibly unrelated, but that's potentially a bunch of distinct state changes (one for each element in response.value). Because the work is asynchronous, that could also result in a number of interim re-renders. Maybe you want that, but if you don't, you can do all the fetching and then update state once. Also, any time you're doing async work in a useEffect, you should allow for the possibility the effect's dependencies have changed in the meantime or the component has unmounted. Something like this (see *** comments):
const [state, setState] = useState({});
const connection = new Connection("devnet");
const { publicKey } = useWallet();
useEffect(() => {
// *** Use a controller to stop when the component unmounts, etc.
const controller = new AbortContoller();
const {signal} = controller;
(async () => {
if (signal.aborted) return; // ***
// If not public key, stop
if (!publicKey) return;
// Get tokens
let response = await connection.getTokenAccountsByOwner(
publicKey!, // owner here
{
programId: TOKEN_PROGRAM_ID,
}
);
// *** Build up the new data in this array (since we skip some elements,
// so we won't have a simple 1:1 mapping of `response.value` elements
// to result elements.
const newState = [];
// *** Wait for all the operations to finish and add their elements to `newState`
await Promise.all(
response.value.map(async (e) => {
const accountInfo = SPLToken.AccountLayout.decode(e.account.data);
// Skip tokens with value other than 1
if (parseInt(`${SPLToken.u64.fromBuffer(accountInfo.amount)}`) !== 1) {
return;
}
const tokenPublicKey = `${new PublicKey(accountInfo.mint)}`;
const ownedMetadata = await programs.metadata.Metadata.load(connection, await programs.metadata.Metadata.getPDA(tokenPublicKey));
// Get only tokens of the collection ...
if (ownedMetadata.data.updateAuthority !== "Address_authority") {
return;
}
// Show the data from arweave
let url = ownedMetadata.data.data.uri;
const response = await fetch(url, {signal}); // *** Pass the signal to `fetch`
if (!response.ok) { // *** This check was missing
throw new Error(`HTTP error ${response.status}`); // Or ignore if you prefer
}
const out = await response.json();
newState.push(out);
})
);
// *** Now we have all of them, do one state update
setState(prevState = [...prevState, ...newState]);
})();
return () => {
// Stop if our dependencies change or the component unmounts
controller.abort();
};
}, [connection, publicKey]);
How will I able to save in hooks that data from database. Since I need to display the data that I get to dropdown.
Here's my code
const [dataSystem, setdataSystem] = useState([])
const getAllSystems = async() => {
......
}
const getDependentSystems = async() => {
const response = await axios.get('/API' + ID)
console.log('LIST OF SYSTEM', response.data)
setdataSystem(response.data)
}
Since upon setState, data is not yet saved to dataSystem I need to trigger getDeoendetSystems() twice to display the list on my dropdown.
Result of console.log
LIST OF SYSTEM [{...},{...}]
0: {ID: 1, SYSTEMID: 12 ...},
1: {ID: 2, SYSTEMID: 13 ...}
Thank you
You need to load the data inside an useEffect like
function Component() {
const [dataSystem, setdataSystem] = useState([])
useEffect(() => {
getDependentSystems()
}, [])
const getDependentSystems = async() => {
const response = await axios.get('/API' + ID)
console.log('LIST OF SYSTEM', response.data)
setdataSystem(response.data)
}
return ...
}
Basically you want to call the function in the useEffect so you only call it once; cause if you call it in the component context, everytime the state updates it will call the api again which will trigger an infinite loop.
I want to get data from firebase inside a useEffect function like this:
useEffect(() => {
/** nope */
async function fetchData() {
let dataObject = {};
let dataArray = [];
setAttendees({});
// You can await here
if (newData[listRedux]) {
const request = await Object.keys(newData[listRedux] .
[1].attendees).map(
user => {
usersRef.child(user).on('value', snap => {
dataObject[snap.key] = snap.val();
setAttendees(dataObject);
console.log(dataObject);
let comp = (
<Avatar
key={snap.key}
size="small"
source={snap.val().avatar}
alt={snap.val().name}
/>
);
dataArray.push(comp);
setAttendeesComp(dataArray);
});
}
);
// Wait for all requests, and then setState
await Promise.all(request).then(() => {
console.log('done');
});
}
}
fetchData();
}, [newData, listRedux]);
Now the second console.log inside the promise all will first show then the first console.log, meaning the request was not done yet.
How can i improve my code so the request and the states are first being set and then continue with the rest?
export default function Example() {
const [data, dataSet] = useState(false)
const [attendees, setAttendees] = useState(false)
async function fetchMyAPI() {
let response = await fetch('api/data')
response = await res.json()
console.log(response);
dataSet(response)
}
useEffect(() => {
if (!attendees) return
fetchMyAPI();
}, [attendees, newData, listRedux]);
useEffect(() => {
setAttendees({})
}, [])
More examples here: