嗨，我刚刚开始使用hook，我正试图将从登录页面获得的数据传递给家长，以便用户可以访问他/她的页面，但我不知道如何做到这一点。我在这里使用了这个指南
但这只是给了我一个不是功能错误
我不知道为什么
这是我的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>
)
}
这是最简单的解决方案，但不幸的是，它不起作用，任何人都可以告诉我为什么或帮助我找到另一种方法来实现它？
看起来您在父组件中将prop定义为firstName，在子组件中将其定义为firstName？如果这是准确的，就会导致错误。
顺便说一句，函数的命名方式并不能很明显地表明它们实际上是函数。我会将函数命名为firstname，例如handleUpdateFirstName或onChangeFirstName。或更好的是，只需将setName作为道具传递即可。你本质上只是在这里重新定义它：
firstName={fornavn => setName(fornavn)}
我会考虑为你的组件使用道具类型——它会告诉你是否有丢失或标签错误的道具。
编辑：将setState作为道具传递的示例：
const Child = ({name, setName}) => (
<div>
<h1>Edit Name</h1>
<input value={name} onChange={e => setName(e.target.value)}/>
</div>
)
const Parent = () => {
const [ name, setName ] = useState('')
return (
<Child name={name} setName={setName}/>
)
}
好吧，整个事情都是从我说时出错开始的
TypeError:无法读取空的属性"fornavn">
这对我来说毫无意义，因为当我安慰.log时，整个fornavn(丹麦语中的fistname(都在
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])
现在它起作用了。。