TypeError: Невозможно прочитать свойство 'props' из неопределенного в функции React

Question

У меня есть userContext, который аутентифицирует пользователя.Это работает, но после успешного входа я хочу, чтобы пользователь был перенаправлен на панель инструментов.поэтому я использую this.props.history.push ('/ dashboard'); , но получаю сообщение об ошибке ниже.

TypeError: Невозможно прочитать свойство 'props' из неопределенного

Есть ли лучший способ сделать это?При использовании функции?

UserContext.js

import React, {useState, createContext, useEffect} from 'react'
import Firebase from 'firebase'
import { Redirect } from 'react-router'

export const UserContext = createContext();


export const UserProvider = props => {
  const [user, setUser] = useState({
    username: "blank",
    loggendIn: false
  });


  var id = localStorage.getItem('id');
  // check if its null
  console.log(id);
  useEffect(() => {
    if (id != null) {
      console.log('id is there');
      // load user from realtime database
      const dbOBJ = Firebase.database().ref().child("users").child(id);
      dbOBJ.on('value', function(snapshot) {
        setUser(snapshot.val());
      });

    } else {
      console.log('no id :( ');
    }
    console.log(props.history);
    this.props.history.push('/dashboard');
  }, [id]);

  return (
    <UserContext.Provider value = {[user, setUser]} >
    {  props.children}
    </UserContext.Provider>
  );
}

app.js

import React from 'react';
import NavBar from './components/navBar';
import Login from './components/login';
import Session from './components/session';
import Dashboard from './components/dashboard';
import './App.css';
import Container from '@material-ui/core/Container';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';

import { UserProvider } from './model/UserContext'


function App() {

  return (
    <div>
      <UserProvider>
      <Session />
       <NavBar />
        <Container maxWidth="sm">
         <Router>
         <Route path='/Login' component={Login}  />
         <Route path='/Dashboard' component={Dashboard}  />
         </Router>
       </Container>
      </UserProvider>
    </div>
  );
}

export default App;

Answer 1

Это функциональный компонент, для которого this не существует экземпляра, история будет просто props.Возможно, вам также понадобится «вставить» объект истории маршрутизатора в реквизит.

import React, {useState, createContext, useEffect} from 'react'
import Firebase from 'firebase'
import { Redirect, withRouter } from 'react-router'

export const UserContext = createContext();


const UserProvider = ({  // don't export here
  children, // destructuring props here so it is clearer
  history
}) => {
  const [user, setUser] = useState({
    username: "blank",
    loggendIn: false
  });


  var id = localStorage.getItem('id');
  // check if its null
  console.log(id);
  useEffect(() => {
    if (id != null) {
      console.log('id is there');
      // load user from realtime database
      const dbOBJ = Firebase.database().ref().child("users").child(id);
      dbOBJ.on('value', function(snapshot) {
        setUser(snapshot.val());
      });
    } else {
      console.log('no id :( ');
    }
    console.log(props.history);
    history.push('/dashboard'); // <-- no this.props, just props or destructured props
  }, [id]);

  return (
    <UserContext.Provider value = {[user, setUser]} >
    { children }
    </UserContext.Provider>
  );
}

export default withRouter(UserProvider);

Answer 2

Я думаю, что вы смешиваете несколько вещей:

Для функций жирной стрелки не определено this, определено, что она подберет window как это для вашего кода.

window.name = 'Mamba';
(() => {console.log(this.name)})();

Таким образом, вам необходимо использовать реквизит прямо здесь, как здесь:

this.props.history.push('/dashboard'); => props.history.push('/dashboard');

Возможно, вам понравитсячтобы пройти этот вопрос если у вас все еще не получилось