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;

import React，{useState，useffect}来自“React”；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“../services/authentication.service”导入{authenticationService}；
从“../Pages/Desktop/Desktop”导入主页；
从“../Pages/Login_Register/Login”导入登录名；
从“../Pages/Login_Register/Register”导入寄存器；
从“../history”导入历史记录；
常量应用=（道具）=>{
const[currentUser，setCurrentUser]=useState（null）；
const[isAdmin，setIsAdmin]=useState（null）；
const[isVIP1，setIsVIP1]=useState（false）；
const[name，setName]=useState（null）；
const[id，setId]=useState（“”）；
useffect（（）=>{
authenticationService.currentUser.subscribe（z=>{
setCurrentUser（z）
});
}, [])
返回(
setName（fornavn）}user_id={id=>setId（id）}admin={admin=>setIsAdmin（admin）}vip={vip1=>setIsVIP1（vip1）}/>
);
}
导出默认应用程序；

这是我的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>
    )
}

import React，{useState}来自“React”；
从“../../services/authentication.service”导入{authenticationService}；
从“react router”导入{Redirect}
从“react hook form”导入{useForm}；
导出默认函数登录（{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[submited，setSubmitted]=使用状态（false）；
常量{register，handleSubmit，errors}=useForm（）；
如果（已提交）{
返回
}   
设updname=null；
const onSubmit=（数据）=>{
authenticationService.login（数据）
.那么(
用户=>{
setSubmitted（真）
updname=user.fornavn；
},
错误=>{
console.log（错误）；
}
);
设置名称（updname）
名字（updname）
}
返回(
日志索引
登录
)
}

---

这是最简单的解决方案，但不幸的是，任何人都无法告诉我原因或帮助我找到另一种方法使其工作？

看起来您的道具在父组件中定义为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}/>
  )
  
}

constchild=（{name，setName}）=>(
编辑名称
setName（e.target.value）}/>
)
常量父项=（）=>{
const[name，setName]=useState（“”）
返回(
)
}

好的，整个事情都是从这个开始的，我有一个错误，说

TypeError:无法读取null的属性“fornavn”

这对我来说毫无意义，因为当我console.log时，整个fornavn（丹麦语的fistname）都在那里

 useEffect(() => {
  authenticationService.currentUser.subscribe(z => {
    console.log(z)
    setCurrentUser(z);
    setName(z.fornavn)
    
  });
 
}, [])

因此，我试图从登录函数获得响应，该函数给了我更多的问题。然而，我的问题的解决方案是在useffect中设置一个if语句，如下所示：

useEffect(() => {
  authenticationService.currentUser.subscribe(z => {
    if(z === null){
      setCurrentUser(null);
      setName(null);
    }else{
      setCurrentUser(z);
      setName(z.fornavn);
    }
   
  });
 
}, [currentUser])

---

现在它可以工作了。

我如何将setName作为道具传递？？用一个例子更新我的答案，但与传递任何道具的方式相同。setState和其他函数一样只是一个javascript函数。好吧，这很好，但它不是我想要的表单的输入，而是我从服务器获得的json响应的数据