Dev Faq
0
votes

Passer des données entre les crochets de réaction

Comment puis-je transmettre les données d'un crochets formulaire ( composant ) à un autre composant. Par exemple, si j'ai besoin de lecteur nom et photo passer à partir de profil.js et le permettez-le dans navigation.js , comment puis-je faire cela?

joueur.js xxx

navigation.js xxx

app.js xxx

context.js xxx

1 commentaires

Vous devez Soulevez votre état Up - réactjs.org/docs /lifting-state-up.up.html - ou utilisez quelque chose comme contexte - réactjs.org/docs/context.html

3 Réponses :

0
votes

Vous pouvez utiliser réacteur-redx pour la manipulation de l'état global ou passer une fonction de rappel de Navigation.js à Profil.js .

2 commentaires

Y a-t-il une autre solution autre que d'utiliser Redux?

Ofc. Pour cette utilisation unique, je vous suggérerais de soulever votre état réactjs.org/docs/lifting-state-up.html autre que si vous l'utilisez plus souvent pour le contexte de réacteur.

1
votes

Utilisez l'API de contexte intégré de React. Enveloppez votre application dans un fournisseur de contexte, vous pouvez utiliser Usecontext Crochet pour l'accès à l'Etat d'accès, les mises à jour de l'état d'expédition entre les composants.

SETUP de niveau d'application - une fois strong> P> 

const {state, dispatch} = useContext(AppContext);

// to update state call dispatch from anywhere, all components consuming state will be updated

dispatch({
   type: "ACTION_TYPE",
   payload: "new_value"
})

1 commentaires

Pouvez-vous me fournir un exemple simple si possible.

1
votes

Comme mentionné dans les commentaires, une option est de laissant l'état de votre application up A> (et qui devrait être l'option préférée d'un état simple).

Dans la pratique, cela ressemblerait à: P>

app.js strong> P> 

import React, { useContext } from 'react';
import { useForm } from 'react-hook-form';

import UserProfileContext from '../context';

const Profile = () => {
  const { setData } = useContext(UserProfileContext);
  const { register, handleSubmit } = useForm();

  return (
    <div>
      <form onSubmit={handleSubmit(setData)}>
        <b>Profile</b>
        <input name="id" ref={register} />
        <input name="name" ref={register} />
        <input name="age" ref={register} />
        <button type="submit" className="submitButton">
          Click
        </button>
      </form>
    </div>
  );
};

export default Profile;

7 commentaires

Merci de mon vrai exemple, je reçois beaucoup d'erreur lorsque je change selon les suggestions.

Mon app.js semble ci-dessous: var réactdom = nécessite ("réact-dom"); Consp app = () => ( <> <> <> Navigation /> < /> ); ReactDom.Render (réact.Createelement (App, NULL), document.getElementByID ("root"));

Merci, dans mon cas profile.js a obtenu mes données de lecteur de connexion chargées à partir de la base de données: Const [PlayerProfile, SetPlayerProfile] = USESTEZ ([]); MON AXIOS GET >> `USEEFFET ( () => {const fetchdata = async () => {Essaye {const parames = {email: loginueremail,}; const res = Axios.get (' localhost: 8000 / service / profil ', {params}); SetPlayerProfile (res.data.playerprofile);} Catch (e) {console.log (e);};};};} } fetchdata ();}, []);

J'ai ajouté mon app.js, navigation.js et profile.js et profil.js.js> comme suggéré. Les données du joueur sont disponibles dans Profile.js et comment passer Const [PlayerProfile, SetPlayerProfile] = USESTE ([]); dans usecontext (UserProfilecontext); ? Quand j'ai essayé Const {SetPlayerProfile} = useContext (userProfilecontext) au lieu de setingdata, il jette une erreur lorsqu'il est déjà déclaré ..

J'ai mis à jour ma question avec mise à jour app.js, navigation.js et profile.js avec mon code d'origine.

Pourquoi créons-nous const [data, setingdata] = usetate ({..... dans app.js , car les données que nous avons besoin pour saisir sont disponibles dans le profil .js?

@soccerway La raison est que vous souhaitez que les données soient également disponibles dans NAVIGATION.JS , d'une manière d'une manière de quitter l'état et de transmettre les données aux composants qui en ont besoin via des accessoires. Une seconde méthode utilise l'API de contexte de réacteur.

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO