0

SingU.js

    import { Link } from "react-router-dom";
    import {useState} from "react";
    import firebase from "firebase/compat/app"; 
    import "firebase/auth"
    
    
    export default function SingUp () {
        const [email, setEmail] = useState("")
        const [password, setPassword] = useState("")
        const [error, setError] = useState("")
    
        const hanglePassChange = (e) => {
            setPassword(e.target.value)
        };
        const hangleEmailChange = (e) => {
            setEmail(e.target.value)
        };
        const hangleSubmit = async (e) => {
            e.preventDefault()
            try {
    
                await firebase.auth.createUserWithEmailAndPassword(email, password)
    
            } catch (e) {
                setError(e)
                console.log(error);
            }
        };
        return (
    
            <div>
                <form onSubmit={hangleSubmit}>
                    <p>
                        Зарегистрируйтесь
                    </p>
                    <div>
                        <input
                            placeholder="Email"
                            name="email"
                            type="email"
                            onChange={hangleEmailChange}
                            value={email}
                        />
                    </div>
                    <div>
                        <input
                            placeholder="Password"
                            name="password"
                            type="password"
                            onChange={hanglePassChange}
                            value={password}
                        />
                    </div>
                    <div>
                        {error && <p>{error}</p>}
                        <button type="submit">Login</button>
                    </div>
                    <hr />
                    <p>
                        Уже зарегистрированны? <Link to="/login">Sing In</Link>
                    </p>
                </form>
            </div>
        )
    }

firebase/index.js

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import {database} from "firebase/database"
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: ***
  authDomain: ***,
  databaseURL: ***,
  projectId: ***,
  storageBucket: ***,
  messagingSenderId: ***,
  appId: ***,
  measurementId: ***
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const db = database()

Выскакивает ошибка:

react-dom.development.js:13231 Uncaught Error: Objects are not valid as a React child (found: TypeError: Cannot read properties of undefined (reading 'createUserWithEmailAndPassword')). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (react-dom.development.js:13231)
    at reconcileChildFibers (react-dom.development.js:14133)
    at reconcileChildren (react-dom.development.js:16990)
    at updateHostComponent (react-dom.development.js:17632)
    at beginWork (react-dom.development.js:19080)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at discreteUpdates$1 (react-dom.development.js:22420)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)
// и вторая ошибка
index.js:1 The above error occurred in the <p> component:

    at p
    at div
    at form
    at div
    at SingUp (http://localhost:3000/static/js/main.chunk.js:1370:83)
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:51613:29)
    at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:51815:29)
    at Routes
    at App
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:51248:30)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:50868:35)
1
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 30 ноя 2021 в 14:28

1 ответ 1

0

В конструкции try...catch в catch параметр e - это объект.

При вызове setError(e) в переменную error записывается объект и ее уже нельзя просто вывести в JSX таким образом <p>{error}</p> - ошибка на этом месте.

Нужно либо привести к строке:

<p>{JSON.stringify(error)}</p>

либо в catch забирать отдельные поля из e (например, message).

2
  • Здравствуйте! Ошибка исчезла, но выскакивает сообщение TypeError: Cannot read properties of undefined (reading 'createUserWithEmailAndPassword'). Причем выскакивает после второго нажатия. И + пользователь не регистрируется почем-то. 7 дек 2021 в 10:45
  • Я понял что я не добавил скобки в auth. Я их добавил прежняя ошибка исчезла и появилась новая firebase_compat_app__WEBPACK_IMPORTED_MODULE_2__.default.auth is not a function. Я просто не могу понять почему она выскакивает? Помогите пожалуйста 8 дек 2021 в 13:54

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.