使用 React Drizzle 組件的無限循環

這可能是問這個問題的最佳地點。

獲取 NFT 的 json URI時出現無限循環問題。我的主要問題是能夠在螢幕上顯示我的 NFT 名稱，但現在我陷入了無限循環。我的提取函式不斷被呼叫。

我試過的：

• 使用效果$$ $$ 用陣列的東西
• 將 API 呼叫函式移到組件勺之外
• 使用回調
• 非同步

連結到幫助我顯示元數據的堆棧溢出問題

Drizzle 組件會重新渲染嗎？並導致無限循環？

在瀏覽器上呈現的內容。

export default ({ drizzle, drizzleState }) => { 
 return (
   <div className="App">

     <ContractData
       drizzle={drizzle}
       drizzleState={drizzleState}
       contract="MyContract"
       method="totalSupply"
       labels="length"
       render={(totalSupply) => {
         const emptyArray = [];
         const arrayLength = Number(totalSupply);
         for(let i=0;i<arrayLength;i++){ emptyArray.push('') }
         if(emptyArray.length === 0) {
           return (
             <Jumbotron className="no-artwork">
               Nothing to see.
             </Jumbotron>
           )
         }
         return (
             <div className="collection-container">
                 {emptyArray.map(( _, index) => {
                   return (
                     <ContractData
                       key={index}
                       drizzle={drizzle}
                       drizzleState={drizzleState}
                       contract="MyContract"
                       method="tokenByIndex"
                       methodArgs={[arrayLength - 1 - index]}
                       render={(tokenId) => (
                         <>
                           <DisplayImage tokenId={tokenId} drizzle={drizzle} drizzleState={drizzleState} />
                         </>
                       )}
                     />
                   )}
                 )}
             </div>
           );
       }}
     />
 <div/>
)};

導出之外的DisplayImage 組件以及渲染圖像和元數據的內容。

const DisplayImage = (NftData) => {
 const [nftMetadata ,setNftMetadata] = useState();

 useEffect(() => {
   setNftMetadata(GetURI(NftData))
 }, [GetURI,NftData]);
 
 return (
   <div>

     <ContractData
       drizzle={NftData.drizzle}
       drizzleState={NftData.drizzleState}
       contract="MyContract"
       method="CID"
       methodArgs={[NftData.tokenId]}
       render={(cid) =>  {
           return(
             <div className="token-container">
               <h2>{nftMetadata.name}</h2>
               <img className="artwork" width="250px" src={`https://ipfs.fleek.co/ipfs/${cid}`} />
             </div>
             )
     
         }}
     />

   </div>
 );

} 

獲取 URI 的函式

我只希望每個 NFT 呼叫一次，但有些東西會導致無限循環。我錯過了useEffect的東西還是真的是Drizzle？

const GetURI = async (data) => {
 
 const nftURI = await data.drizzle.contracts.MyContract.methods.tokenURI(data.tokenId).call()
 

 await fetch(nftURI , {
   headers: {
     'Content-Type': 'application/json',
     'Accept': 'application/json',
     "Access-Control-Allow-Origin": "*"
   },
   })
   .then(data => {
     return data.json();
   })
   .then(data => {
     return data || '';
   })
   .catch(err => {
     return console.log(err);
 });
 
};

我正在集思廣益一種在導出內執行 useEffect 的方法。

如果將來有人需要，請找到我的答案。

const DisplayImage = (data) => {

 const [nftMetadata, setNftMetadata] = useState();

 const GetURI = async (data) => {
    const nftURI = await data.drizzle.contracts.Contract.methods.tokenURI(data.tokenId).call()

     await fetch(nftURI , {
       headers: {
         'Content-Type': 'application/json',
         'Accept': 'application/json',
         "Access-Control-Allow-Origin": "*"
       },
       })
       .then(data => {
         return data.json();
       })
       .then(data => {
         return setNftMetadata(data || []);
       })
       .catch(err => {
         return console.log(err);
     });
 });

 useEffect(() => {
   GetURI(data);
 }, [data.tokenId])   
 
 return (
   <div className="token-container">

    <h2>{nftMetadata.name}</h2>
    <img className="artwork" width="450px" src={`https://ipfs:/whatever/${nftMetadata.image}`} />

   </div>
 );

};

return (
<div>

 {array.map(index) => {

  // Some Other Code That returns a TokenID //

  <>
   <DisplayImage address={drizzle.contractList[0].address} tokenId={tokenId} drizzle={drizzle} drizzleState={drizzleState}/>
  </>

</div>
})

您的useEffect(...)函式設置狀態，這將導致組件重新渲染，再次呼叫該函式，這將設置狀態等等……

要解決此問題，要麼僅在值 fromGetURI(...)不同時設置狀態，要麼nftMetadata將組件轉換為類並在componentDidMount().

引用自：https://ethereum.stackexchange.com/questions/107745