React:如何使用从firebase接收到的json数据来制作数组列表?

我想通过填写姓名、电子邮件、指定、电话和其他信息来列出用户详细信息;图像输入字段,我已经将表单数据保存在一个对象中,并使用props将表单数据发送给它的父对象 addedUser(userData); ,我在用这个 addedUser prop将数据发送到firebase,然后使用相同的提取数据在数组中生成用户列表。

我做了 loadedData 空数组只是想将数据推入其中,但 responseData.json() 没有给我任何东西,数据被完美地保存到firebase,但我在使用它时遇到了问题。

请检查此处的代码以及 <Users /> 我试图列出的组件代码:

家长:-

function App() {
    const [userData, setUserData] = useState([]);

    const fetchData = useCallback(async () => {
        try {
            const responseData = await fetch(
                "https://react-users-db-default-rtdb.asia-southeast1.firebasedatabase.app/users.json"
            );

            const data = responseData.json();
            console.log(data);

            const loadedData = [];

            for (const key in data) {
                loadedData.push({
                    key: key,
                    userName: data[key].userName,
                    userEmail: data[key].userEmail,
                    userDesignation: data[key].userDesignation,
                    usePhone: data[key].usePhone,
                    userImage: data[key].userImage,
                });
            }

            console.log(loadedData);

            setUserData(loadedData);
        } catch (err) {
            console.log(err);
        }
    }, []);

    useEffect(() => {
        fetchData();
    }, [fetchData]);

    async function recieveUserData(users) {
        const responseData = await fetch(
            "https://react-users-db-default-rtdb.asia-southeast1.firebasedatabase.app/users.json",
            {
                method: "POST",
                body: JSON.stringify(users),
                headers: {
                    "Content-Type": "application/json",
                },
            }
        );
        const data = await responseData.json();
        console.log(data);
    }

    return (
        <main>
            <div className="form__wrap">
                <AddUserForm addedUser={recieveUserData} />
            </div>
            <div className="user__wrap">
                {userData.length > 0 ? (
                    <Users newUser={userData} />
                ) : (
                    <p>No user found</p>
                )}
            </div>
        </main>
    );
}

用户组件:

export default function Users({ newUser }) {
    console.log(newUser);
    return (
        <div className="usercard__wrap">
            {newUser.map((el, i) => {
                return (
                    <UserCard
                        key={i}
                        name={el.userName}
                        email={el.userEmail}
                        designation={el.userDesignation}
                        phone={el.userPhone}
                        image={el.userImage}
                    />
                );
            })}
        </div>
    );
}

数据将被发送到firebase:-

但是 responseData.json() 正在给我这个,我看不到要访问的用户对象:-