Firestore 数据库无限循环 React Js答案

【问题标题】：Firestore database infinite loop React JsFirestore 数据库无限循环 React Js
【发布时间】：2022-01-09 21:25:00
【问题描述】：

我将我的 react js 应用程序链接到云 Firestore，我正在尝试在我的 js 文件中显示对象。

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

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

Infinite loop console

【问题讨论】：

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

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

例如：

将在每次渲染时运行

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

只会运行一次

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

将在给定属性更改时运行

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

在您的情况下，您正在调用异步函数，异步函数会更新状态并导致重新渲染。由于您没有将任何触发器（或空数组）添加到 useEffect 中，因此它将一次又一次地运行。

【讨论】：