React Hook useEffect multiple problems

Admin 1
Viewed 42

This is my first time using a useEffect hook. what its doing is reading the database to see if a value returns and if a value returns thats the userToken which is sign of an account so it signs you in. However, I have 2 problems. The Link name button doesnt automatically sign you in, instead you have to type another letter in the input box after to sign in. I tried fixing this by adding connectUser under writeUserData on line 49 but that just makes the site crash. My second problem is I cant display {userToken} on the page after bewing signed in. I recieve Error: Objects are not valid as a React child (found: object with keys {username}). If you meant to render a collection of children, use an array instead.

import React, { useState, useEffect } from "react";
import {initializeApp} from 'firebase/app';
import { getDatabase, ref, set, child, get} from 'firebase/database';

export default function Username(props) {
        const [userName, setUsername] = useState('');
        const [userToken, setuserToken] = useState('')


        const clientCredentials = {
            apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
            authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
            databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
            projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
            storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
            messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
            appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
        }
        const app = initializeApp(clientCredentials);
        const db = getDatabase();        
        const address = props.address;

        function writeUserData(userId, userN, ) {
            const reference = ref(db, 'users/' + userId);

            set(reference, {
                username: userN,
            });
        }

        const dbRef = ref(getDatabase());

        function connectUser() {
            get(child(dbRef, `users/${address}`)).then((snapshot) => {
            if (snapshot.exists()) {
                setuserToken(snapshot.val());
            } else {
                console.log("No data available");
            }
            }).catch((error) => {
            console.error(error);
            });
        }

        const handleChange = (event) => setUsername(event.target.value);

        function handleClick(e) {
            writeUserData( address, userName);
        }

        useEffect(() => {
            connectUser()
        });

    while (userToken == '')
        return (
            <>
                <div>
                    <p className = "account-Info" >address: {address}</p>
                </div>
                <div id="form">
                    <h2 className='user-Create' > Username </h2>
                    <form id='set-User'>
                        <input id='username' className="user-Create" type='text' value={userName} onChange={handleChange} 
                        required minLength='3' maxLength='30' pattern="[a-zA-Z0-9_]+" title='only letters, numbers, and underscores.'/>
                        <button className='user-Create' type="button" onClick={handleClick}>Link Name</button>
                    </form>
                </div>
            </>
        );

    while (userToken)
        return (
            <p className = "account-Info" >hi user</p>
        );
}

use-effect firebase-realtime-database next.js reactjs javascript
2 Answers

First, please do not use while. Instead, use if.

if (!Boolean(userToken)) return <something />;

// No need to give condition here
// If userToken is not false, this will return
return <main />;

Second, useEffect's dependency, according to what you wrote, which is

  useEffect(() => {
    connectUser();
  });

It means you execute connectUser() everytime any component update. Pass a dependency. If want no dependency, use [], which means execute connectUser() only once when component mounts.

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

Third, for Error: Objects are not valid as a React child (found: object with keys {username}), if you get similar error in future, use console.log() to debug. In your case, console.log(userToken) and go see in console of your browser.

Fourth, if you are handling about authentication, did you consider using firebase/auth?

user_163262420

For useEffect running multiple times, please pass in a dependency array. Check the react documentation on useEffect. You can start by giving an empty array as the second parameter to useEffect

user_155390130
Related