[英]This.props is not a function
I'm trying to pass this.state.user
to props using isAuthed
function but it returns我正在尝试使用
isAuthed
function 将this.state.user
传递给道具,但它返回
this.props.isAuthed is not a function
this.props.isAuthed 不是 function
. . My ultimate goal is to be able to pass
this.state.user
as props to my App.js to make Sign out button appear and dissapear depending on whether the user is logged in or not.我的最终目标是能够将
this.state.user
作为道具传递给我的App.js ,以根据用户是否登录来使退出按钮出现和消失。 What can be the problem?可能是什么问题?
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
in the parent App.js component looks like this:父
IsAuthed
组件中的 IsAuthed 如下所示:
<Route path='/dashboard' component={Dashboard} isAuthed = {this.checkIfAuthed}>
It calls the function checkIfAuthed
:它调用 function
checkIfAuthed
:
checkIfAuthed(isLoggedIn){
if(isLoggedIn) {
this.setState({
isLoggedIn: true
})
}
alert('Logged In')
}
The whole App.js
component looks like this:整个
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;
It seems you are using react-router-dom and attempting to pass extra props to a component being rendered by a Route
component.您似乎正在使用 react-router-dom 并尝试将额外的道具传递给由
Route
组件呈现的组件。 Extra props aren't passed along, they are ignored.额外的道具不会被传递,它们会被忽略。
You can use the render
prop and pass in any extra props along with the route props.您可以使用
render
道具并将任何额外的道具与路线道具一起传递。
<Route
path='/dashboard'
render={routeProps => (
<Dashboard {...routeProps} isAuthed={this.checkIfAuthed} />
)}
/>
Or render as a child component if you don't need the route props或者如果您不需要路由道具,则呈现为子组件
<Route path='/dashboard' >
<Dashboard isAuthed={this.checkIfAuthed} />
</Route>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.