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

【问题标题】：React Native + Firestore infinite loop, using hooksReact Native + Firestore 无限循环，使用钩子
【发布时间】：2020-09-16 09:32:14
【问题描述】：

刚开始在这里学习钩子。

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

【问题讨论】：

标签： reactjs firebase react-native react-hooks react-native-firebase

【解决方案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

【讨论】：