-2

I have stored a certain data from api response in a state and also as a variable, and when I console log, I can see the response.

Here:

const service = gettoken.then((response) => setId (response.data.services))

console.log(ID)

But when I try to use the state value further, it is not accepting it.

It throws the following error: xhr.js:187 GET https://xxxx.com//xyz 403

GET https://xxxx.com/(this is where the value of const ID should be accepted)/xyz

Any help would be appreciated please. Thanks!

  const [tokens, setTokens] = useState("");
  const [ID, setId] = useState("");
  const [data, setData] = useState("");
  
var cred = JSON.stringify({     // cred are my valid credentials to get get the token from api

   username: "xxxxx",
   password: "xxxxx"

});


useEffect(() => {
    const showdata = async () => {
      
      getToken().then(token => { 

        const configuration = {
          headers: {
            'Authorization': token,
            'Content-Type': 'application/json',
          }
        };
        
       const gettoken =  axios.post("https://xxxx.com/auth", cred) // request token 
       
        const idtoken = gettoken.then((response) => setTokens(response.data.IdToken))
      
        console.log(tokens)

        const service = gettoken.then((response) => setId (response.data.services))
     
        
        console.log(ID) // this is where I can see the above response from const service
        

        const URL = `https://xxxx.com/${ID}/xyz` // but when I try to use the state overe here in this url, it doesn't accept it. 
 



        axios.get(URL, configuration)
          .then((response) => {
            console.log('Response is', response);
            setData(response.data);
          })
          .catch((error) => {
            console.log(error);
          });
    });
    
    };
    showdata();
  }, [] );
user19478298
  • 23
  • 4
  • What specifically do you mean by "it does not accept it"? After you log `ID` to the console, also log `URL` to the console. What are the two values logged? What specifically is wrong? – David Nov 04 '22 at 12:31
  • Does this answer your question? [The useState set method is not reflecting a change immediately](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately) – David Nov 04 '22 at 12:34
  • Hi David, the above has helped me solve my query. Thank you so much!! Sometimes, all you need is a ray of hope. – user19478298 Nov 04 '22 at 13:24

1 Answers1

0

So here is the answer to the problem I couldn't solve for weeks.

Even if you add a setID to the function, and console log and check (console.log(ID)), you will find the data in your console log. But the setID will still use the value from its previous closure and not the updated one. In order to update the state, you need to use useEffect hook which is similar to ComponentDidUpdate in a class based component.

useEffect(() => {

console.log("This is your ID: ", ID)

}, [ID])

Here, the value of const ID is updated. You can now use this as you like in your code.

user19478298
  • 23
  • 4