Le composant enfant React ne se met pas à jour après le changement d'état parent

J'essaie de créer un joli composant ApiWrapper pour remplir les données dans divers composants enfants. D'après tout ce que j'ai lu, cela devrait fonctionner: https://jsfiddle.net/vinniejames/m1mesp6z/1/

class ApiWrapper extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      response: {
        "title": 'nothing fetched yet'
      }
    };
  }

  componentDidMount() {
    this._makeApiCall(this.props.endpoint);
  }

  _makeApiCall(endpoint) {
    fetch(endpoint).then(function(response) {
      this.setState({
        response: response
      });
    }.bind(this))
  }

  render() {
    return <Child data = {
      this.state.response
    }
    />;
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data
    };
  }

  render() {
    console.log(this.state.data, 'new data');
    return ( < span > {
      this.state.data.title
    } < /span>);
  };
}

var element = < ApiWrapper endpoint = "https://jsonplaceholder.typicode.com/posts/1" / > ;

ReactDOM.render(
  element,
  document.getElementById('container')
);

Mais pour une raison quelconque, il semble que le composant enfant ne se met pas à jour lorsque l'état parent change.

Est-ce que j'ai râté quelque chose?

Il y a deux problèmes avec votre code.

L'état initial de votre composant enfant est défini à partir des accessoires.

this.state = {
  data: props.data
};

Citant cette réponse SO :

Passer l'état initial à un composant en tant que propest un anti-motif car la getInitialStateméthode (dans notre cas, le constuctor) n'est appelée que la première fois que le composant est rendu. Jamais plus. Cela signifie que si vous restaurez ce composant en passant une valeur différente en tant que a prop, le composant ne réagira pas en conséquence, car le composant conservera l'état de la première fois qu'il a été rendu. C'est très sujet aux erreurs.

Donc, si vous ne pouvez pas éviter une telle situation, la solution idéale est d'utiliser la méthode componentWillReceivePropspour écouter de nouveaux accessoires.

L'ajout du code ci-dessous à votre composant enfant résoudra votre problème de re-rendu du composant enfant.

componentWillReceiveProps(nextProps) {
  this.setState({ data: nextProps.data });  
}

Le deuxième problème concerne le fetch.

_makeApiCall(endpoint) {
  fetch(endpoint)
    .then((response) => response.json())   // ----> you missed this part
    .then((response) => this.setState({ response }));
}

Et voici un violon fonctionnel: https://jsfiddle.net/o8b04mLy/

Il y a certaines choses que vous devez changer.

Lorsque fetchvous obtenez la réponse, ce n'est pas un json. Je cherchais comment puis-je obtenir ce json et j'ai découvert ce lien .

De l'autre côté, vous devez penser que la constructorfonction n'est appelée qu'une seule fois.

Vous devez donc changer la façon dont vous récupérez les données dans le <Child>composant.

Ici, j'ai laissé un exemple de code: https://jsfiddle.net/emq1ztqj/

J'espère que cela aide.