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

使用钩子反应Native + Firestore无限循环

1 个答案: