Привет, я только начал использовать хуки и пытаюсь передать данные, которые я получил со страницы входа в систему, родительскому, чтобы пользователь мог получить доступ к своим страницам, но я не знаю, как это сделать. Я использовал это руководство здесь

Но это просто дало мне ошибку, не связанную с функцией

И я не знаю почему

Вот мой 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>
    )
}

Это самое простое решение, но, к сожалению, оно не работает, потому что никто не может сказать мне, почему, или помочь мне найти другой способ заставить его работать?

2
ITsmurf 2 Сен 2020 в 18:50

2 ответа

Лучший ответ

Хорошо, все началось с того, что я получил сообщение об ошибке

TypeError: невозможно прочитать свойство fornavn со значением null

Для меня это не имело смысла, потому что, когда я console.log, все это было fornavn (имя на датском языке)

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

Поэтому я попытался получить ответ от функции входа в систему, которая дала мне еще больше проблем, но решение моей проблемы состояло в том, чтобы установить оператор if в useEffect следующим образом:

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

И теперь работает ..

0
ITsmurf 3 Сен 2020 в 14:58

Похоже, у вас есть опора, определенная как 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}/>
  )
  
}
0
dro3333 2 Сен 2020 в 16:56