修复数据库无限循环对Js的反应

Question

我的react应用程序链接到了云修复，我试图在js文件中显示对象。

我的Firestore中只有一个对象，但是它一直在循环中读取，我不知道为什么。

来自explore.js的代码(显示来自Firebase的对象)

  const [nft,setNft]=useState([])
  const getNft= async()=>{
     const nft = await fs.collection('NFT').get();
     const nftArray=[];
     for (var snap of nft.docs){
       var data = snap.data()
        data.ID = snap.id;
        nftArray.push({
          ...data
        })
        if(nftArray.length===nft.docs.length){
          setNft(nftArray);
        }
      }
    }
    useEffect(()=>{
      getNft();
    })}
        {nft.length > 0 && (
            <div>
                <div className='cardContainer'>
                    <Nft nft={nft}/>
                </div>
            </div>
        )}
        {nft.length < 1 && (
            <div className='loading'>Loading products..</div>
        )}

无限回路控制台

Answer 1

useEffect有一个“触发器”属性。

例：

将在每次呈现上运行。

useEffect(() => {
  //do something
});

只运行一次

useEffect(() => {
  //do something
}, []);

将在给定属性更改时运行。

useEffect(() => {
  //do something
}, [someProperty, someOtherProperty]);

在您的示例中，您正在调用异步函数，异步函数更新状态，并导致重发。由于没有向useEffect添加任何触发器(或空数组)，它将一次又一次地运行。