0
votes

pourquoi la carte de donneur disparaît et le formulaire devient vide lorsque je change de route dans React js en utilisant Redux

`J'espère que vous vous débrouillez bien, j'ai un problème.Je crée une application Web de don et j'utilise React et Redux, de sorte que lorsque l'utilisateur ajoute ses informations sous la forme de numéro de téléphone et de groupe sanguin après en ajoutant et s'il se déplace vers une autre route, le formulaire devient vide et la carte de donateur disparaît.

Y a-t-il une solution pour garder la carte et le formulaire de donateur toujours remplis et désactivés dans le composant même si l'utilisateur modifie l'itinéraire?

toute aide est appréciée

afficher le problème

Ajouter un composant Composant Carte de donateur

javascript reactjs html css

0 commentaires

3 Réponses :

0
votes

Redux aide à y parvenir. Ma suggestion est d'utiliser useEffect () sur le composant et de demander au magasin redux s'il y a une valeur stockée. Si c'est le cas, vous devez remplir les champs / valeurs avec ces valeurs. Est-ce clair? Vous pouvez publier votre code, cela vous aidera beaucoup pour vous aider avec plus de détails.

0 commentaires

0
votes

après quelques heures, je viens de résoudre le problème en utilisant localStorage , la persistance des données est la clé

0 commentaires

1
votes

Après quelques heures, je viens de résoudre le problème en utilisant localStorage, la persistance des données est la clé

localstorage n'est pas une bonne approche pour résoudre ce problème. localstorage sert à conserver les données après le rechargement, mais ici, vous souhaitez conserver les données après le changement d'itinéraire. (Notez que react-dom-router ne recharge pas la page.)

le problème est que pendant que vous avez configuré le redux dans votre code, vous utilisez useReducer pour l'état des entrées utilisateur:
const [userInput, setUserInput] = React.useReducer(
  (state, newState) => ({...state, ...newState}),
  {
    bloodType: "",
    phoneNumber: "",
  }
)
useReducer est un réducteur local pour react, et il n'utilise pas redux code>. votre état d'entrée est donc local et il sera perdu après avoir modifié l'itinéraire. (alors que redux store est global et partagé entre les composants.)

Puisque votre composant utilise déjà redux , vous pouvez à la place ajouter un réducteur pour Input dans redux, puis mappez cela aux accessoires du composant dans la fonction mapstatetoprops , afin que vous puissiez y accéder avec this.props.userInput . de cette façon, vous ne perdez pas l'état après les changements de route, car le fournisseur de magasin redux est global.

0 commentaires