Я создал форму входа и доступа к состояниям через контекстный api. Кажется, не могу найти проблему в моем коде, но появляются следующие ошибки:
Ошибки: 1-Устаревший контекстный API был обнаружен в дереве строгого режима ... 2-findDOMNode устарел в StrictMode. findDOMNode был передан экземпляр Transition, который находится внутри StrictMode. Вместо этого добавьте ссылку непосредственно к элементу, на который вы хотите сослаться.
Код:
import React,{useContext, useState, useEffect} from 'react'
import {auth} from '../firebase/firebase';
const AuthContext= React.createContext();
export function useAuth(){
return useContext(AuthContext);
}
export function AuthProvider({children}) {
const[currentUser,setCurrentUser]= useState();
function login(email, password){
return auth.signInWithEmailAndPassword(email, password)
}
useEffect(()=>{
const unsubscriber= auth.onAuthStateChanged(user=>{
setCurrentUser(user)
})
return unsubscriber
},[])
const value={
currentUser,
login
}
return (
<AuthContext.Provider value={value}>
{children}
</AuthContext.Provider>
)
}
// Login form//
import React, {useRef, useState} from 'react';
import './login.css';
import {Button, Form, FormGroup, Input, Label} from 'reactstrap';
import {useAuth} from '../../context/AuthContext'
import { Alert } from 'reactstrap';
const Login=()=> {
const emailRef = useRef();
const passwordRef=useRef();
const {login} = useAuth();
const[error,setError]=useState();
async function handlesubmit(e){
e.preventDefault()
try{
setError('')
await login(emailRef.current.value,passwordRef.current.value)
}
catch{
setError("Failed to Login")
}
}
return (
<div>
<Form className='login-form' onSubmit={handlesubmit}>
{error && <Alert color="danger">{error}</Alert>}
<h1 className='website'><span className='font-weight-bold'>ApniShop</span>.com</h1>
<FormGroup>
<label>Email</label>
<Input name='email' type='text' placeholder='Email' ref={emailRef}/>
</FormGroup>
<FormGroup>
<label>Password</label>
<Input name='password' type='password' placeholder='password' ref={passwordRef}/>
</FormGroup>
<Button className='btn-lg btn-block' outline color ="danger" type='submit'>Log in</Button>
</Form>
</div>
)
}
export default Login;