reactjs - 如何在从数据库登录时使用挂钩将数据从子级更新到父级
问题描述
嗨,我刚刚开始使用钩子,我正在尝试将从登录页面获得的数据传递给父页面,以便用户可以访问他/她的页面,但我不知道该怎么做,我在这里使用了本指南
但这只是给了我一个不是函数错误
我不知道为什么
这是我的 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)}
我会考虑为您的组件使用 Proptypes - 它会告诉您是否缺少或错误标记的道具。
编辑:将 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}/>
)
}
推荐阅读
- javascript - 使用 3rd 方函数获取单选按钮组的值
- python - urllib.error.URLError:
import yfinance as yf
msft = y
- python-3.x - 如何改善无监督图像语义分割中的相间边界?
- javascript - 通过从 URL 中获取值将值预填充到表单中
- cupy - 来自cupy中的点积的意外结果
- php - Wordpress - 在按钮单击时执行 PHP 函数
- rest - AzDO:嵌套模板时“值不能为空。参数名称:runParameters”
- c# - unity gameobject 指向玩家的方向
- android - gradle taskassembledebug FAILURE中的Flutter错误:构建失败并出现异常
- spring-security - 如何让 Spring 忽略 botframework 端点中的令牌