TypeError：无法在 React 函数中读取未定义的属性“道具”

Question

我有一个正在对用户进行身份验证的 userContext。它正在工作，但在成功登录后，我希望将用户定向到 /dashboard。所以我正在使用 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');

如果你仍然不成功，你可能想通过this question