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 class 组件，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

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

React Native + Firestore infinite loop, using hooks

reactjs

firebase

react-native

react-hooks

react-native-firebase