嗨,我刚刚开始使用钩子,我正尝试将我从登录页面获得的数据传递给父级,以便用户可以访问他/她的页面,但是我不知道该怎么做,因此我在这里使用了本指南
但这只是给我一个不是函数错误
我不知道为什么
这是我的app.js
import React, { useState, useEffect } from 'react';
import {BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import {authenticationService} from '../services/authentication.service';
import Home from '../Pages/Desktop/Desktop';
import Login from '../Pages/Login_Register/Login';
import Register from '../Pages/Login_Register/Register';
import history from '../history';
const App = (props) => {
const [currentUser, setCurrentUser] = useState(null);
const [isAdmin, setIsAdmin] = useState(null);
const [isVIP1, setIsVIP1] = useState(false);
const [name, setName] = useState(null);
const [id, setId] = useState('');
useEffect(() => {
authenticationService.currentUser.subscribe(z => {
setCurrentUser(z)
});
}, [])
return (
<div history={history}>
<Router>
<div>
<Switch>
<Route path="/register">
<Register />
</Route>
<Route path="/login">
<Login firstName={fornavn => setName(fornavn)} user_id={id => setId(id)} admin={admin => setIsAdmin(admin)} vip={vip1 => setIsVIP1(vip1)} />
</Route>
<Route path="/home">
<Home />
</Route>
</Switch>
</div>
</Router>
</div>
);
}
export default App;
这是我的login.js
import React, { useState } from 'react';
import {authenticationService} from '../../services/authentication.service';
import { Redirect } from 'react-router'
import { useForm } from 'react-hook-form';
export default function Login({firstname, user_id, admin, vip, props}) {
const [currentUser, setCurrentUser] = useState(null);
const [isAdmin, setIsAdmin] = useState(null);
const [isVIP1, setIsVIP1] = useState(false);
const [name, setName] = useState(null);
const [id, setId] = useState('')
const [submitted, setSubmitted] = useState(false);
const { register, handleSubmit, errors } = useForm();
if (submitted) {
return <Redirect push to={{
pathname: '/home'
}}
/>
}
let updname = null;
const onSubmit=(data) => {
authenticationService.login(data)
.then(
user => {
setSubmitted(true)
updname = user.fornavn;
},
error => {
console.log(error);
}
);
setName(updname)
firstname(updname)
}
return (
<div>
<h2>log ind</h2>
<form onSubmit={handleSubmit(onSubmit)}>
<div>
<div>
<input name="email" type="text" ref={register({required: true})}/>
</div>
<div className="form-group">
<input name="password" type="password" ref={register({required: true})} />
</div>
<div>
<button type="submit"/>logind</button>
</div>
</div>
</form>
</div>
)
}
这是最简单的解决方案,因此,但是不幸的是,任何人都无法告诉我原因或帮助我找到使其工作的另一种方法吗?
好吧,最初的事情是我说错了
TypeError:无法读取null的属性'fornavn'
这对我来说毫无意义,因为当我进行console.log记录时,fornavn的整个内容(丹麦语中的拳头名)就在那里
useEffect(() => {
authenticationService.currentUser.subscribe(z => {
console.log(z)
setCurrentUser(z);
setName(z.fornavn)
});
}, [])
所以我试图从登录函数的响应中得到巫婆给了我更多的问题,但是我的问题的解决方案是在useEffect中设置一个if语句,如下所示:
useEffect(() => {
authenticationService.currentUser.subscribe(z => {
if(z === null){
setCurrentUser(null);
setName(null);
}else{
setCurrentUser(z);
setName(z.fornavn);
}
});
}, [currentUser])
现在就可以了。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句