代码之家 › 专栏 › 技术社区 › Gusta

为什么我在尝试设置状态时会得到太多渲染?

use-state firebase-realtime-database reactjs javascript

Gusta · 技术社区 · 2 年前

这是我的密码。我正在从firebase获取数据并将其放入我的 groupDataMap .

const Home = () => {
    
    const [memberInfo, setMemberInfo] = useState('');
    const auth = getAuth();
    const user = auth.currentUser;
    const memberId = auth.currentUser.uid
    const db = getDatabase();
    const dbRef = ref(db, 'groups');
    let groupDataMap = {};

    //get group name's if member_id(user) matches member id
    onValue(dbRef, (snapshot)=> {
        const data = snapshot.val();

        for(var key in data){
            if(data.hasOwnProperty(key)){
                const groupname = data[key]
                groupDataMap = groupname
            }
        }
    })
    setMemberInfo(groupDataMap)

我在用 memberInfo 填充 <li> 在我的回报中:

 return (
        <div>
            <div class="brand">
                <h1>Headline</h1>
                <p>paragraph</p>
            </div>

            <ul class="list-group container-fluid">
                <li class="list-group-item">
                {memberInfo}
                </li>
            </ul>
        </div>
    );

我不是只设定一次状态吗?

2 回复 | 直到 2 年前

Shri Hari L 2 年前

我不是只设定一次状态吗?

不 setMemberInfo 将被一次又一次地调用,这样组件就会无限地渲染。

了解 useEffect 钩

    const [memberInfo, setMemberInfo] = useState('');
    const auth = getAuth();
    const user = auth.currentUser;
    const memberId = auth.currentUser.uid

    useEffect(() => {
        const db = getDatabase();
        const dbRef = ref(db, 'groups');
        let groupDataMap = {};

        //get group name's if member_id(user) matches member id
        onValue(dbRef, (snapshot)=> {
            const data = snapshot.val();

            for(var key in data){
                if(data.hasOwnProperty(key)){
                    const groupname = data[key]
                    groupDataMap = groupname
                }
            }
        })
        setMemberInfo(groupDataMap)

    }, []);

提示: Refer this 与你的问题类似