J'ai un élément de passage de composant parent comme des accessoires à un composant enfant. Une API s'appelle sur la charge de la page à l'aide de Voici un extrait de mon code: p> ComposantDidMount code> dans le composant parent et l'état initial des données transmis à l'enfant change. Le changement est reflété dans le composant parent mais pas dans le composant enfant. import React from 'react';
import { render } from 'react-dom';
class ForecloseBtn extends React.Component {
constructor(props) {
super(props);
console.log(this.props);
this.state = {
lead_id: this.props.id,
isForeclosed: this.props.foreclose,
};
}
render() {
return (
......
)
}
};
export default ForecloseBtn;
4 Réponses :
C'est pourquoi, dans votre composant enfant, vous ne prêtez que les accessoires dans le constructeur et définir son état en conséquence; S'ils changent plus tard, vous ne mettez pas à jour l'état du composant enfant, aucun re-rendu ne sera fait.
Il existe plusieurs options pour résoudre les problèmes, les étant les plus faciles n'utilisant pas l'état dans le composant enfant, mais directement Alternativement, vous pouvez utiliser accessoires ; Dans ce cas dès que le composant parent est mis à jour, les nouveaux accessoires déclencheront un reformateur de la composante enfant. C'est également la solution la plus propre, vous n'aurez qu'une seule source de vérité, à savoir les accessoires passés de la composante mère à l'enfant. composantDidUpdate dans l'enfant et mettre à jour son état sur la base des nouveaux accessoires reçus du parent:
class ForecloseBtn extends React.Component {
constructor(props) {
super(props);
console.log(props);
this.state = {
lead_id: props.id,
isForeclosed: props.foreclose,
};
}
render() {
return (
......
)
}
};
You don't need this before props in child component constructor
Corriger, cependant, pas vraiment la réponse à la question
Vous devez utiliser la méthode ComponentDidUpdate dans votre composant enfant:
componentDidUpdate (prevProps) {
if(prevProps.id !== this.props.id || prevProps.foreclose !== this.props.foreclose){
this.setState({
lead_id: this.props.id,
isForeclosed: this.props.foreclose,
})
}
}
Deux solutions possibles ici:
premier Avez-vous vraiment besoin de stocker l'état que vous envoyez sous forme de code > Les accessoires du parent sous forme d'état sur l'enfant? Pourquoi ne les utilisez-vous pas comme simple second Si vous devez absolument stocker ceux comme sur l'enfant sur l'enfant , vous pouvez rendre l'enfant avec une clé Quelque chose comme: Vous devez lire ceci, cependant: accessoires comme ils sont? Votre enfant rentrera quand ils changeront. projectile qui doit changer quand vous voulez que votre enfant remonte complètement, car vous auriez besoin d'un moyen d'obtenir une fonction de votre constructeur à exécuter à nouveau.
Pouvez-vous ajouter du code de
composantDidMount de parent aussiUtilisez une fonction Memoze qui ne fonctionne que lorsque les accessoires ont changé. Ou mieux: Faites de votre composant un entier contrôlé et de supprimer toute logique comme celle-ci. Vous pouvez simplement utiliser directement les accessoires à la place.
Lire ce Cela aidera
L'état en enfant ne mettra pas à jour. Vous pouvez directement utiliser cela.Props où vous voulez