React Native + Firestore无限循环，使用钩子

Question

刚刚开始在这里学习钩子。

我正在从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..

Answer 1

发生此问题的原因是一遍又一遍地调用useEffect。如果您熟悉React类组件，则useEffect类似于componentDidMount和componentDidUpdate。

因此，只要在useEffect内设置状态，就会触发更新，然后再次调用useEffect，从而导致无限循环。

为了解决这个问题，useEffect接受一个额外的参数，该参数是一组依赖关系，它指示仅当其中一个依赖关系发生更改时，才应重新执行此useEffect调用。在您的情况下，您可以提供一个空数组，告诉react这个useEffect应该只调用一次。

 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();
    }, []) // <------------ the second argument we talked about