javascript - React ...防止无限循环

Question

我在 Firebase 上的 Next.JS 应用中创建了一条路线，尽管我打算非常小心，但还是遇到了问题。

首先这是路线的代码(page.tsx):

'use client';

import React, {useState,useEffect} from "react";
import firebase from "../../firebase/initFirebase";
import DrillManage from '../components/drillMng'

export default async function MemberPage() {
  const [memberID, setMemberID] = useState("");
  const [userID, setUserID] = useState("");

    if (typeof window !== "undefined") {
        const memberID = window.location.pathname.substring(1)
        setMemberID(memberID)
    } else console.log('window.location is UNDEFINED')

    useEffect(() => {
        let dbRef = firebase.database().ref('Members')
        dbRef.child(memberID)
        .once('value', (snapshot) => {
            const usrID = JSON.parse(JSON.stringify(snapshot.child('UserID')))
            setUserID(usrID)
        })
    }, [memberID]);

    return (
        <DrillManage usrID={userID} />
    )
}

这是我在网络浏览器中看到的内容:

Unhandled Runtime Error

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
Call Stack

我在代码中没有看到任何可能引发无限循环的内容。

但我可能是错的。谁能发现我做错了什么吗？并让我知道吗？

我也尝试过以下代码，但由于某种原因，我没有发现 userID 从未设置。

'use client';

import React, {useState,useEffect} from "react";
import firebase from "../../firebase/initFirebase";
import DrillManage from '../components/drillMng'
import { useRouter, usePathname, useSearchParams } from 'next/navigation'

export default async function MemberPage() {
    const [userID, setUserID] = useState("");
    const pathname = usePathname().substring(1)
    const [memberID, setMemberID] = useState(pathname);
    console.log('pathname=',pathname)
    console.log('memberID=',memberID)

    useEffect(() => {
        let dbRef = firebase.database().ref('Members')
        dbRef.child(memberID)
        .once('value', (snapshot) => {
            const usrID = JSON.parse(JSON.stringify(snapshot.child('UserID')))
            console.log('usrID=',usrID)
            setUserID(usrID)
        })
    }, [pathname,memberID]);

    return (
        <DrillManage usrID={userID} />
    )
}

Answer 1

您的代码还有一个问题 - 您将客户端组件声明为async。目前仅在服务器上支持异步组件，这也可能导致 Next.js 中无限重新渲染。您应该删除 async 关键字。