内部使用效果导致无限循环

Question

我想将列表使用到sedata和setuserdata。我正在使用数据通过用户列表映射并在表上显示。我正在使用userData在不同组件中获取用户信息。这会导致无限循环。

import { useState, useEffect, useContext } from 'react';
import { collection, onSnapshot } from 'firebase/firestore';
import { db, auth } from '../../firebase';
import { UserContext } from '../../Contexts/UserContext';

const Datatable = () => {
    const {userData, setUserData} = useContext(UserContext);
    const [data, setData] = useState([]);
    const [isEditing, setIsEditing] = useState(false);
    const [currentId, setCurrentId] = useState("");

    useEffect(() => {
        const getUserData = () => {
            onSnapshot(collection(db, "users"), (snapshot) => {
                let list = [];
                snapshot.docs.forEach((doc) => {
                list.push({ id: doc.id, ...doc.data() });
                setData(list);
                setUserData(list)
                });
            }, (err) => {
            console.log(err);
            });
        }
        getUserData();
    }, [])
}

Answer 1

在使用效率下不应完成对状态的更新值。您必须在外部创建功能并更新状态值。

如果这样做，您将获得警告：超过最大更新深度。错误。

发生这种情况，因为一旦您更新状态，状态的引用将被更改，并且会发生组件rerender。再次由于引用已更改。使用效应将再次调用，这无限地发生在一定程度之后的反应停止。