Reactjs 反应本机+；Firestore无限循环，使用挂钩

刚刚开始学习钩子

我正在从firestore获取数据，并尝试使用钩子将其设置为状态。当我取消对行的注释时，我陷入了一个无限循环。没有错误，但是控制台疯狂地记录了数千次状态

如果你需要更多信息，请告诉我

function Lists(props) {

    const [lists, setLists] = useState([])
    const [loading, setLoading] = useState(true)

    useEffect(() => {
        const subscriber = 
            firestore().collection('users').doc(props.user).collection('lists')
              .onSnapshot(QuerySnapshot => {
                  const items = []
                  QuerySnapshot.forEach(documentSnapshot => {
                      items.push({
                          ...documentSnapshot.data(),
                          key: documentSnapshot.id,
                      });
                    //setLists(items)

                    setLoading(false)

                    console.log(lists)
                  })

            })
            // unsubscribe from firestore
            return () => subscriber();
    })

//rest of func..

---

发生此问题的原因是useEffect被反复调用<如果您熟悉React类组件，则code>useEffect类似于

componentDidMount

和

componentDidUpdate

因此，无论何时在useEffect中设置状态，都会触发更新，然后再次调用useEffect，从而调用无限循环

为了解决这个问题，useEffect接受一个额外的参数，这是一个依赖项数组，它表示只有当它的一个依赖项发生更改时，才应该重新执行这个

useEffect

调用。在您的例子中，您可以提供一个空数组，告诉react这个useffect应该只调用一次

useffect（（）=>{
常数订户=
firestore（）.collection（'users'）.doc（props.user）.collection（'list'））
.onSnapshot（QuerySnapshot=>{
常量项=[]
QuerySnapshot.forEach（documentSnapshot=>{
推({
…documentSnapshot.data（），
关键字：documentSnapshot.id，
});
//集合列表（项目）
设置加载（错误）
console.log（列表）
})
})
//从firestore取消订阅
return（）=>subscriber（）；
}，[]）/发生此问题是因为useEffect会被反复调用<如果您熟悉React类组件，则code>useEffect

类似于

componentDidMount

和

componentDidUpdate

因此，无论何时在useEffect中设置状态，都会触发更新，然后再次调用useEffect，从而调用无限循环

为了解决这个问题，useEffect接受一个额外的参数，这是一个依赖项数组，它表示只有当它的一个依赖项发生更改时，才应该重新执行这个

useEffect

调用。在您的例子中，您可以提供一个空数组，告诉react这个useffect应该只调用一次

useffect（（）=>{
常数订户=
firestore（）.collection（'users'）.doc（props.user）.collection（'list'））
.onSnapshot（QuerySnapshot=>{
常量项=[]
QuerySnapshot.forEach（documentSnapshot=>{
推({
…documentSnapshot.data（），
关键字：documentSnapshot.id，
});
//集合列表（项目）
设置加载（错误）
console.log（列表）
})
})
//从firestore取消订阅
return（）=>subscriber（）；
}, []) //