The async-await does not work properly with useEffect() in react native. The code does not re render properly

Question

Update I think the problem is that the credentials array which I fill from the response of the fetchCredentials() function does not get filled quickly so the array becomes empty so no change in length occurs, is there any way to wait until the array gets filled? Also how to make the first fetch method runs always but make the UI renders only if the offeredCredentialsArraySize changes. Also I am using a flat list to list the offerred credentials so will the extraData prop help me? *

I have a problem in useEffect() and the await. I need to re render the code each time the offeredCredentialsArraySize changes, I tried everything but nothing seems to work. I think the problem is in the await in the fetchCredentials() function, as I understand the await should make the code wait until this method finishes and returns the result and then the fetchOfferedCredentials() should get executed where the size of the array changes, followed by the console.log() but this is not the case, the console.log() prints in the beginning and does not wait for the fetch and the await to finish. To make the problem more clear, the fetchCredentials() returns as a result an array of credentials, next I check in the fetchOfferedCredentials() function if the array returned from the first function contains any credentials in the "offered" state, if so, I then need to re render and print them. Also inside the fetchOfferedCredentials() I need to remove some of these credentials after the user accepts the offer so I do so again by checking if the state of any of the credentials which are stored in the array containing the result of the fetchCredentials() method changed to "issued" I then remove this offeredCredential from the offered array so its size changes once more and then I will also need to re render. So to sum up I need the fetch to run all the time and whenever the size of the offeredCredentials array changes I need to re render the UI but I think there is a problem in the await so any help? Bellow is the code. Thank you in advance.

const [credentials, setCredentials] = React.useState([]);
  const [offeredCredentials,setOfferedCredentials] = React.useState([]);
  const [arraySize2, setArraySize2] = React.useState(0); 
  const [connectionDetailsArray, setConnectionDetailsArray] = React.useState(); 
  const [connectionDataArray, setConnectionDataArray] = React.useState([]);
  const [connectionDetailsArraySize, setConnectionDetailsArraySize] = React.useState(0);
  const [count, setCount] = React.useState(0);
  const [offeredCredentialsArraySize,setOfferedCredentialsArraySize] = React.useState(0);

React.useEffect(() => {
    fetchCredentials();
    fetchOfferedCredentials();
    console.log("This should be printed after the fetch")
  },[offeredCredentialsArraySize]);

async function fetchCredentials() {

    const res = await fetch('https://api.streetcred.id/custodian/v1/api/' + walletID + '/credentials', {
       method: 'GET',
       headers: {
        Authorization: 'Bearer ',
        XStreetcredSubscriptionKey: '',
          Accept: 'application/json',
       },
    });
    res.json().then(res => setCredentials(res)).then(setArraySize2(credentials.length));

  }

  async function fetchOfferedCredentials()
  {
    setCount(count+1);
    for (let index = 0; index < arraySize2; index++) 
      {
        if(credentials[index].state=="Offered")
        {
          setOfferedCredentials(addConnectionDetails(offeredCredentials,credentials[index].credentialId, credentials[index]) );
          console.log(offeredCredentials);
        }
      }  

    for (let index = 0; index < offeredCredentials.length; index++)
    {   

     let tempConnectionID= offeredCredentials[index].connectionId;
     const res = await fetch('https://api.streetcred.id/custodian/v1/api/'+walletID+'/connections/'+tempConnectionID, {
       method: 'GET',
       headers: {
        Authorization: 'Bearer L2JBCYw6UaWWQiRZ3U_k6JHeeIkPCiKyu5aR6gxy4P8',
        XStreetcredSubscriptionKey: '4ed313b114eb49abbd155ad36137df51',
          Accept: 'application/json',
       },
    });
    res.json().then(res => setConnectionDetailsArray(res));
    const obj = { id: connectionDetailsArray.connectionId,credentialId:offeredCredentials[index].credentialId, title: connectionDetailsArray.name, image: connectionDetailsArray.imageUrl };    
    setConnectionDataArray(addConnectionDetails(connectionDataArray,obj.id,obj)); 

    }


    for (let index = 0; index < arraySize2; index++) 
    {
      if(credentials[index].state=="Issued")
        {
          for (let index2 = 0; index2 < offeredCredentials.length; index2++) {
              if(offeredCredentials[index2].credentialId == credentials[index].credentialId)
              {
                console.log("here")
                offeredCredentials.splice(index2,1)
                credentials.splice(index,1)
              }
          }

        }
    }
    if(count<50)
    setOfferedCredentialsArraySize(count+1);
    if(currArraySize2!=arraySize2)
    setCount(count+1);
    console.log(offeredCredentials.length); 

  }

score 0 · Answer 1 · answered Apr 13 '20 at 13:06

Because fetchCredentials is an async function, it returns a promise. Because you didn't actually return anything in that function, the promise will resolve to undefined. If you want fetchOfferedCredentials() to be called after fetchCredentials is finished, you need to await that promise returned by fetchCredentials().

You might try

React.useEffect(async () => {
    await fetchCredentials();
    fetchOfferedCredentials();
    console.log("This should be printed after the fetch")
  },[offeredCredentialsArraySize]);

However, because of 'race conditions' as stated (but not explained) in here and here, you should wrap your function in another async inside the function:

React.useEffect(() => {
    const fetchAllCredentials = async() => {
    await fetchCredentials();
    fetchOfferedCredentials();
    console.log("This should be printed after the fetch")
  }
  fetchAllCredentials()
  },[offeredCredentialsArraySize]);

The async-await does not work properly with useEffect() in react native. The code does not re render properly

1 Answers1