javascript - this.props 不是函数

Question

我正在尝试this.state.user使用函数传递给道具，isAuthed但它返回

this.props.isAuthed 不是函数

. 我的最终目标是能够this.state.user作为道具传递给我的App.js ，以根据用户是否登录，使退出按钮出现和消失。可能是什么问题？

import React from "react";
import { Redirect } from "react-router-dom";
import firebaseConfig from "./firebaseconfig";


class Dashboard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
        this.displayCredentials = this.displayCredentials.bind(this);
        this.isAuthed = this.isAuthed.bind(this);
      }

      displayCredentials() {
        firebaseConfig.auth().onAuthStateChanged( (user) => {
            if (user) {
              //console.log(user.displayName);
              this.setState({
                  user: user.displayName
              });
              
            } else {
               this.setState({
                   user: false
               })  
            }
          });
        }

        isAuthed() {
            this.props.isAuthed(this.state.user);
        }
        

      componentDidMount() {
          this.displayCredentials();
          this.isAuthed();
      }

    render() {
        if (this.state.user === false) {
            return <Redirect to='/sign-in' />
        }
        
      return (<h1>Hello, {this.state.user}</h1>);
    }
  }

export default Dashboard;

IsAuthed在父 App.js 组件中看起来像这样：

<Route path='/dashboard' component={Dashboard} isAuthed = {this.checkIfAuthed}>

它调用函数checkIfAuthed：

checkIfAuthed(isLoggedIn){
    if(isLoggedIn) {
      this.setState({
        isLoggedIn: true
      })
    }
    alert('Logged In')
}

整个App.js组件如下所示：

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import Login from "./Login";
import SignUp from "./Signup";
import Forgotpassword from './Forgotpassword';
import Dashboard from './Dashboard';

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
        isLoggedIn: false
    }
    this.checkIfAuthed = this.checkIfAuthed.bind(this);
  }
  checkIfAuthed(isLoggedIn){
    if(isLoggedIn) {
      this.setState({
        isLoggedIn: true
      })
    }
    alert('Logged In')
}
  render() {
    return (
      <Router>
        <div className="App">
          <nav className="navbar navbar-expand-lg navbar-light fixed-top">
            <div className="container">
              <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
                <ul className="navbar-nav ml-auto">
                  <li className="nav-item">
                    <Link className="nav-link" to={"/sign-in"}>Login</Link>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" to={"/sign-up"}>Sign up</Link>
                  </li>
                  <li className="nav-item">
                    <Link className="nav-link" to={"/sign-in"}>Sign out</Link>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        
          <div className="auth-wrapper">
            <div className="auth-inner">
              <Switch>
                <Route exact path='/' component={Login} />
                <Route path="/sign-in" component={Login} />
                <Route path="/sign-up" component={SignUp} />
                <Route path='/forgotpassword' component={Forgotpassword} />
                <Route path='/dashboard' component={Dashboard} isAuthed = {this.checkIfAuthed}> 
                </Route>
              </Switch>
            </div>
          </div>
        </div>
      </Router>
    );
  }
}

export default App;

标签： javascriptreactjsreact-routerreact-router-dom

Answer 1

您似乎正在使用 react-router-dom 并尝试将额外的道具传递给由组件呈现的Route组件。额外的道具不会被传递，它们会被忽略。

您可以使用该render道具并将任何额外的道具与路线道具一起传递。

<Route
  path='/dashboard'
  render={routeProps => (
    <Dashboard {...routeProps} isAuthed={this.checkIfAuthed} />
  )}
/>

或者如果您不需要路由道具，则呈现为子组件

<Route path='/dashboard' >
  <Dashboard isAuthed={this.checkIfAuthed} />
</Route>