Je n'ai pas pu trouver la réponse nulle part parce que rien ne travaillait pour moi, alors je commence un nouveau sujet. S'il vous plaît, ne marquez pas comme un duplicata
Puis, plus tard dans Profile.js, je déclenche une récupération pour obtenir des données de Backend et enregistrer ces données à l'état à l'aide de cet istate ({...}). Lorsque le composant de profil est rendu, tout a l'air bien.
dans routeur.js, il existe également un lien: .. qui devrait aller à votre propre profil. Ainsi, lorsque votre identifiant d'utilisateur est 1 et que vous visitez le profil de l'utilisateur avec ID 22, votre URL sera / p / user22 et le lien pointera sur /p/user1.< Le problème est que Même si des profils sont gentiment rendus, le composant de profil ne devient pas re-rendu lorsque vous cliquez sur le lien (ce qui devrait vous diriger vers / p / user1 et montrer votre profil à la place). J'ai essayé d'économiser de l'emplacement de réacteur-routeur à l'état, de sorte que chaque fois que chaque URL change d'URL, il sera pris dans la composanteWillreceiveProps () et à l'intérieur de l'état de mise à jour. Mais toujours rien. Des idées? PS: J'utilise réact.component
3 Réponses :
a eu le même problème dans mon projet, n'a pas trouvé de bonne idée de fonctionnement à la tâche de faire quelque chose comme ceci: Tout d'abord, vous devez créer votre composant de profil comme Exporter Le profil de classe s'étend ReallConent (exportation sans valeur par défaut). getprofiledata est une méthode où je reçois des données de mon API et mettez-la de l'état. Cela renforcera votre application
Ne fonctionne pas pour moi mate. Mais merci d'effort de toute façon.
Numéro et lieux (d'appels de journaux) vous indiquera si le composant est recréé (de nombreux appels de construction) ou mis à jour (appels CDM). Déplacez vos données Appelez en conséquence (dans CDM ou CDU ... ou SCU). P> Vous pouvez enregistrer des données courantes dans le composant ci-dessus Vous pouvez mettre à jour l'état des accessoires modifiés solution la plus simple: P> > console.log (this.props.match.params.uid) code> dans constructeur code>, composentDidMount () code> et composantDidUpdate ( ) CODE> ( UNSAFE_COMPONENTWILLRECOPROPROPROS () CODE> est obsolète)
Solution H2>
ComponentDidUpdate code> doit être protégé avec des conditions pour empêcher la boucle infinie. Voir Docs . P> componentDidUpdate(prevProps) {
if (this.props.some_var !== prevProps.some_var) {
// prop (f.e. route '.props.match.params.uid') changed
// setState() - f.e. for 'loading' conditional rendering
// call api - use setState to save fetched data
// and clearing 'loading' flag
}
}
D'accord, le journal du composantDidMount est affiché une seule fois, tandis que le composantDidUpdate est appelé beaucoup, de plusieurs fois (en réalité avec une extraction à l'intérieur, il est en boucle infinie - l'état de réglage à l'intérieur de la fetch déclenche la même fonction). Mais si nous ignorons la boucle infinie, il a finalement commencé à afficher un contenu différent.
Docs contient certaines restrictions;)
D'accord, merci mec! marquer votre réponse comme correct. Je vais aussi le modifier et coller une solution afin que les autres puissent le voir facilement
Voici ce qui se passe:
- L'itinéraire rend le composant de profil pour la première fois.
- Le composant de profil appelle le constructeur, à l'heure,
ceci.props.match.params.uid.uid est égal à "user22". Par conséquent, this.state.profile_user_id est maintenant "user22".
- Vous cliquez sur le lien vers / p / user1.
- réagissent des rendus
le même itinéraire . .
- La route alors
RERenders Le même composant de profil mais avec Différents accessoires .
- Depuis, c'est le même composant de profil,
il ne met pas à jour l'état .
Ceci explique pourquoi vous voyez toujours le profil de User22