react-native - 反応ネイティブの useEffect() では、async-await が正しく機能しません。コードが正しく再レンダリングされない

Question

更新 問題は、fetchCredentials() 関数の応答から入力した資格情報配列がすぐに入力されないため、配列が空になり、長さが変化しないことだと思います。配列が入力されるまで待機する方法はありますか? また、最初の fetch メソッドを常に実行する方法ですが、offedCredentialsArraySize が変更された場合にのみ UI をレンダリングするようにします。また、提供された資格情報をリストするためにフラット リストを使用していますが、extraData 小道具は役に立ちますか? *

useEffect() と await に問題があります。offerCredentialsArraySize が変更されるたびにコードを再レンダリングする必要があります。すべてを試しましたが、何も機能していないようです。問題は fetchCredentials() 関数の await にあると思います。await は、このメソッドが終了して結果を返すまでコードを待機させ、配列のサイズが変更された場所で fetchOfferedCredentials() を実行する必要があることを理解しています。 console.log() が続きますが、そうではありません。console.log() は最初に出力され、フェッチと await が終了するのを待ちません。問題をより明確にするために、fetchCredentials() は結果として資格情報の配列を返します。次に、最初の関数から返された配列に「提供済み」状態の資格情報が含まれているかどうかを fetchOfferedCredentials() 関数で確認します。もしそうなら、私はそれらを再レンダリングして印刷する必要があります。また、fetchOfferedCredentials() 内では、ユーザーがオファーを受け入れた後にこれらの資格情報の一部を削除する必要があるため、fetchCredentials() メソッドの結果を含む配列に格納されている資格情報の状態を確認することで再度削除します「issued」に変更し、提供された配列からこの offerCredential を削除して、そのサイズをもう一度変更し、再レンダリングする必要があります。要約すると、常にフェッチを実行する必要があり、offedCredentials 配列のサイズが変更されるたびに UI を再レンダリングする必要がありますが、await に問題があると思います。以下はコードです。前もって感謝します。また、fetchOfferedCredentials() 内では、ユーザーがオファーを受け入れた後にこれらの資格情報の一部を削除する必要があるため、fetchCredentials() メソッドの結果を含む配列に格納されている資格情報の状態を確認することで再度削除します「issued」に変更し、提供された配列からこの offerCredential を削除して、そのサイズをもう一度変更し、再レンダリングする必要があります。要約すると、常にフェッチを実行する必要があり、offedCredentials 配列のサイズが変更されるたびに UI を再レンダリングする必要がありますが、await に問題があると思います。以下はコードです。前もって感謝します。また、fetchOfferedCredentials() 内では、ユーザーがオファーを受け入れた後にこれらの資格情報の一部を削除する必要があるため、fetchCredentials() メソッドの結果を含む配列に格納されている資格情報の状態を確認することで再度削除します「issued」に変更し、提供された配列からこの offerCredential を削除して、そのサイズをもう一度変更し、再レンダリングする必要があります。要約すると、常にフェッチを実行する必要があり、offedCredentials 配列のサイズが変更されるたびに UI を再レンダリングする必要がありますが、await に問題があると思います。以下はコードです。前もって感謝します。

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); 

  }