1
votes

Réagissez en envoyant des données d'un composant à un autre

Il s'agit d'une fonction sur ma page de composant de connexion et result.user lorsque l'utilisateur se connecte avec succès répond avec des informations utilisateur. Comment puis-je envoyer les informations result.user à ma page principale, afin que je puisse définir ce qu'un utilisateur peut et ne peut pas faire?

newLogin = (e) => {
    fetch("http://localhost:4000/login", {
        method: "POST",
        headers: {
            "Content-type": "application/json",
        },
        body: JSON.stringify(this.state)
    })
        .then((response) => response.json())
        .then((result) => {
            console.log(result.user)
        });
}

reactjs

3 commentaires

Vous invoqueriez généralement un rappel qui a été passé comme accessoire d'un composant parent au composant de connexion, ou vous enverriez peut-être une action redux pour le stocker dans l'état de l'application auquel l'autre composant est abonné, ou peut-être que votre application utilise le contexte React API. Pouvez-vous fournir un exemple de code plus minimal, complet et reproductible de la relation entre ces deux composants?

Créez un élément d'état dans votre fichier principal et transmettez-le en tant qu'accessoires. Ensuite, en utilisant la fonction setUser (disons), vous pouvez définir l'utilisateur sur result.user . Vous l'avez maintenant dans votre fichier principal dans la variable user .

Vous pouvez utiliser context, redux, localstorage ce que vous voulez réellement;) En savoir plus sur les bonnes pratiques pour stocker les informations utilisateur de manière sécurisée;)

3 Réponses :

1
votes

Je ne connais pas la structure de vos composants mais vous devriez utiliser react-redux pour stocker votre utilisateur connecté car ces données sont nécessaires pour accéder n'importe où dans votre application et dans n'importe quel composant, je vous recommande vivement d'utiliser react react-redux pour vos meilleures pratiques.

React-redux est facile à utiliser et facile d'accès aux données de tout utilisateur connecté à partir de l'état, il est donc préférable d'approcher d'utiliser react-redux au lieu de passer des données via des accessoires.

0 commentaires

0
votes

vous pouvez utiliser localStorage pour stocker les données dans le navigateur. dans lequel vous pouvez stocker les données et les utiliser n'importe où dans votre code. vous n'avez pas besoin de transmettre les données. lorsque l'utilisateur se déconnecte, vous devez effacer le stockage. Pour créer un élément dans le stockage

localStorage.getItem('userData');

Pour effacer les données lors de la déconnexion de l'utilisateur

localStorage.removeItem('userData');

ici, userData représente les données stockées dans le navigateur. vous pouvez vérifier à chaque fois que vous en avez besoin, de sorte que si l'utilisateur est toujours connecté en utilisant

localStorage.setItem('userData', 'result.user')

si userData est disponible, vous pouvez considérer que l'utilisateur est connecté.

1 commentaires

J'ai pensé que cela peut fonctionner. Mais n'y a-t-il pas un meilleur moyen de connecter mon frontend reactjs et nodejs plutôt que d'avoir à enregistrer les données utilisateur dans localstorage? Parce qu'en même temps, lorsque quelqu'un achète mon produit, je dois également mettre à jour sa base de données backend.

0
votes

La meilleure pratique pour gérer la connexion des utilisateurs dans les applications React est d'utiliser la gestion de l'état pour ceux comme Redux et Mobx, vous pouvez utiliser React.Context qui est facile à utiliser. Dans un cas, j'ai créé un wrapper pour React.Context. React-principal Dans un autre cas, j'ai créé une gestion d'état qui est tellement plus facile à utiliser react-global-hook

0 commentaires