0
votes

Le composant enfant ne se met pas à jour lorsque l'état du parent change

J'ai un composant parent avec un tableau dans son état, le tableau est également ajouté au fil du temps.

C'est le parent. Il se passe beaucoup de choses dedans mais je l'ai résumé au principal: l'état, la fonction componentShouldUpdate (qui fonctionne pour tout ce que le composant doit faire) et la méthode show data qui fonctionne également (je peux confirmer que gaitStats se met à jour correctement).

class GaitStat extends Component {
  constructor(props) {
    super(props);
  }


  render() {
    return (
      <div>
        Hi
        <p>{this.props.gaitStats}</p>
      </div>
    );
  }
}

GaitStat, enfant:

  class GaitMeasure extends Component {
  constructor(props) {
    super(props);

    this.state = {
      grabData: null;
      gaitStats: []
    };
  }  
  shouldComponentUpdate(nextProps) {
   if (this.props.data !== null) {
     if (this.props.data !== nextProps.data) {
       this.showData();
    }
      return false;
    }
   if (this.props.canvas.x !== null) {
     return true;
   } 
  if (this.state.grabData) {
    return true;
  }

  return false;
}

showData() {
....

const avgGait = [...this.state.gaitStats];

avgGait.push(Math.abs(rightX - leftX));

this.setState({
  timeline: this.state.timeline + 3,
  gaitStats: avgGait
});

// render

D'après ce que je peux dire, GaitStat ne renvoie jamais this.state.gaitStatus comme accessoire après le rendu initial. L'accessoire reste un tableau vide quel que soit le nombre de fois que le parent effectue la restitution ou la mise à jour de son état.

reactjs

2 commentaires

La méthode shouldcomponentupdate sur votre classe GaitMeasure garantit que le composant ne se met à jour que lorsque ses accessoires changent. Donc, changer l'état ne déclenchera pas un nouveau rendu de la classe GaitMeasure donc la classe Gaitstat ne reçoit jamais de nouveaux accessoires

êtes-vous sûr qu'il est en train de relancer GaitMeasure? je pense que vous devez changer shouldComponentUpdate

3 Réponses :

0
votes

vous pouvez essayer avec votre composant enfant

shouldComponentUpdate(nextProps, nextState) { 
  if(nextProps.gaitStats != this.props.gaitStatus) {
   this.forceUpdate();
 }
}

0 commentaires

2
votes

Votre méthode shouldComponentUpdate empêche la classe de se mettre à jour lorsque son état change. Vous devez mettre à jour la méthode shouldComponentUpdate vers la méthode

shouldComponentUpdate(nextProps, nextState) {
   if(nextState !== this.state){
        return true;
   }
   if (this.props.data !== null) {
     if (this.props.data !== nextProps.data) {
       this.showData();
    }
      return false;
    }
   if (this.props.canvas.x !== null) {
     return true;
   } 
   if (this.state.grabData) {
     return true;
   }

  return false;
}

Vous pouvez trouver plus d'informations sur shouldComponentUpdate ici

0 commentaires

0
votes

essayez ceci:

 shouldComponentUpdate(nextProps) {
   if ((this.props.data === null && this.props.data !== nextProps.data) || this.props.canvas.x !== null || this.state.grabData) {
        return true;
      }
  this.showData();
  return false;
}

cela inclut toutes vos conditions à rendre en un si et si vous répondez aux critères, exécutez showData et retournez false, par exemple ne pas mettre à jour

0 commentaires