1 votes

comment mettre à jour les données d'un enfant à un parent en utilisant des crochets lors de la connexion à partir de la base de données ?

Bonjour, je viens de commencer à utiliser les hooks et j'essaie de passer les données de ma page de connexion au parent pour que l'utilisateur puisse accéder à ses pages, mais je ne sais pas comment faire, j'ai utilisé ce guide. aquí

Mais cela m'a juste donné une erreur "n'est pas une fonction".

et je ne sais pas pourquoi

voici mon 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;

et voici mon 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>
    )
}

C'est la solution la plus simple pour l'instant mais malheureusement elle ne fonctionne pas. Quelqu'un peut-il me dire pourquoi ou m'aider à trouver un autre moyen de la faire fonctionner ?

0voto

dro3333 Points 74

Il semble que la propriété soit définie comme firstName dans le composant parent, et firstname dans le composant enfant ? Si c'est le cas, cela causerait une erreur.

Soit dit en passant, la façon dont vous nommez vos fonctions ne rend pas très évident le fait qu'il s'agit en fait de fonctions. Je nommerais la fonction firstname quelque chose comme handleUpdateFirstName ou onChangeFirstName par exemple. Ou... mieux encore, passez simplement setName comme une propriété. Vous ne faites que le redéfinir ici :

firstName={fornavn => setName(fornavn)}

J'envisagerais d'utiliser Proptypes pour vos composants - il vous dira si vous avez un accessoire manquant ou mal étiqueté.

Edit : exemple de passage de setState comme prop :

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}/>
  )

}

0voto

ITsmurf Points 67

Ok, tout a commencé quand j'ai eu une erreur disant .

Erreur de type : Impossible de lire la propriété 'fornavn' de null

Cela n'a aucun sens pour moi parce que lorsque je console.log la chose entière pournavn (fistname en danois) était là

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

  });

}, [])

J'ai donc essayé d'obtenir la réponse de la fonction de connexion, ce qui m'a donné encore plus de problèmes. La solution à mon problème était cependant de mettre une déclaration if dans le useEffect comme ceci :

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

  });

}, [currentUser])

Et maintenant ça marche..

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X