Trying to set React Usestate variable, but it stays empty

Question

I am new to React and I don't understand this:

I write

const [imageURL,setImageURL] = useState('');

and

 
var temp = "https://" + response.value.cid + ".ipfs.dweb.link/" + response.value.files[0].name;
                                setImageURL(temp)
                                console.log("Set ImageURL to: ", temp);
                                console.log("imageURL shows: ", imageURL);

But am obviously missing the point, because I get an empty variable imageURL:

Would appreciate if someone could explain this to me :) Thanks!

@HassaanAli I though setImageURL() is doing exactly that? Tushar Shahi ... so the problem is it is not updated at once? How would I then go from here with the above code to work? Wrap in async function and wait for it? — Juno, Jan 14 '22 at 19:35
This is the orginal problem. I need to get an URL into the `imageURL` variable but it doesnt work. `fetch("https://api.nft.storage/upload", options) .then((response) => response.json()) .then((response) => {console.log("Debugging."); console.log(response); console.log(response.value.cid); var temp = "https://" + response.value.cid + ".ipfs.dweb.link/" + response.value.files[0].name; setImageURL(temp) console.log("Set ImageURL to: ", temp); console.log("imageURL shows: ", imageURL);` — Juno, Jan 14 '22 at 19:38
React state updates are asynchronously processed, they aren't immediate. Logging the state right after enqueueing an update will only ever log the state value from the current render cycle. — Drew Reese, Jan 14 '22 at 21:35

score 2 · Answer 1 · answered Jan 14 '22 at 19:33

You can't get the latest state right away in react. when you are setting your state, it's an async operation and it won't give you the value right away in the next line. In order to execute sth based on the latest change in your state, you need to use useEffect like this:

const [imageURL,setImageURL] = useState('');
let temp = "https://" + response.value.cid + ".ipfs.dweb.link/" + response.value.files[0].name;
console.log("Set ImageURL to: ", temp);
setImageURL(temp);

//The latest change would show up inside useEffect here
useEffect(() => {
  console.log("imageURL shows: ", imageURL);
}, [imageURL])

the code inside useEffect would execute everytime your state updates since you pass your state as a dependency there. Go search for useEffect. there are numerous resources out there about that.

That didnt work. "Error: Invalid hook call. Hooks can only be called inside of the body of a function component." — Juno, Jan 14 '22 at 19:46
where did you put it? you should put all your hooks inside of your component functions. Put useEffect before return JSX and after all of definitions you made. — TinkSimple, Jan 14 '22 at 19:48

score 1 · Answer 2 · answered Jan 14 '22 at 19:33

1

That empty string you are passing into the useState() function, is the value first assigned to imageURL. You need to call setImageURL() to set it as you want, or pass in a specific initial value.

answered Jan 14 '22 at 19:33

tutiplain

1,427
4
19
37

I call setImageURL(temp) to set it but seemingly it is not updated at once ... – Juno Jan 14 '22 at 19:44
changing state is always asynchronous, which means that calling setImageURL will cause the component to refresh and THEN the value will be available. You might want to call setImageURL inside a useEffect() hook, which is called on every refresh. – tutiplain Jan 14 '22 at 19:54

Trying to set React Usestate variable, but it stays empty

2 Answers2