Im gettin error: "Login.js:12 Uncaught (w obiecanym) TypeError: Nie można odczytać właściwości undefined (odczyt 'setIsAuth')"

Oto mój Login.js

import React from 'react';
import { auth, provider } from '../firebaseconf';
import { signInWithPopup } from 'firebase/auth';
import { useNavigate } from 'react-router-dom';

function Login({ setIsAuth }) {
    let navigate = useNavigate();

    const singInWithGoogle = () => {
        signInWithPopup(auth, provider).then((result) => {
            localStorage.setItem("isAuth", true);
            setIsAuth(true);
            navigate("/");
        });
    };

    return (
        <div>
            <button onClick={singInWithGoogle}>Sign in with Google</button>
        </div>
    );

}
export default Login;

I jest mój App.js


import React, { Component } from 'react';
import './css/main.css';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import CreatePost from './pages/CreatePost';
import Login from './pages/Login';


class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isAuth: false,
      setIsAuth: false
    };
  }

  render() {
    return (
      <Router>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/createpost"> Create New Post</Link>
          {!this.state.isAuth && <Link to="/login">Login</Link>}
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login setIsAuth={this.state.setIsAuth} />} />
          <Route path="/createpost" element={<CreatePost />} />
        </Routes>
      </Router>
    );
  }
}

export default App;

Myślę, że zdefiniowałem to już w App.js w konstruktorze, szukam twojej pomocy, dzięki

0
TomekS 24 styczeń 2022, 15:19

1 odpowiedź

Najlepsza odpowiedź

W login.js używasz setIsAuth tak, jakby to była funkcja, ale nie jest funkcją, jest to zmienna ustawiona jako false w App.js. Aby zmienić wartość this.state.setIsAuth, powinieneś zrobić coś takiego:


App.js

signIn = () => {
  this.setState({ setIsAuth: true });
}

<Route path="/login" element={<Login setIsAuth={this.signIn} />} />


Login.js

signInWithPopup(auth, provider).then((result) => {
  localStorage.setItem("isAuth", true);
  setIsAuth();
  navigate("/");
});
0
VersifiXion 24 styczeń 2022, 15:37
Ok teraz przekierowuje mnie do Home po zalogowaniu, ale "Login" w pasku nawigacyjnym jest nadal widoczne, więc wygląda na to, że stan się nie zmienił
 – 
TomekS
24 styczeń 2022, 17:32
A także nie otrzymuję błędu, ale "TypeError: Cannot read properties undefined (odczyt 'setIsAuth')" jest w konsoli
 – 
TomekS
24 styczeń 2022, 17:35
Ok, zmieniłem to na "{!this.state.setIsAuth && Login}" i teraz działa, nadal mam te informacje w konsoli, ale wszystko działa dobrze, dzięki
 – 
TomekS
24 styczeń 2022, 17:38
Usunąłem również isAuth, ponieważ wygląda na to, że jest bezużyteczne
 – 
TomekS
24 styczeń 2022, 17:39