Reaguj Komponent podrzędny nie aktualizuje się po zmianie stanu nadrzędnego

Próbuję stworzyć ładny składnik ApiWrapper do wypełniania danych w różnych składnikach podrzędnych. Ze wszystkiego, co przeczytałem, powinno to działać: 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')
);

Ale z jakiegoś powodu wydaje się, że komponent potomny nie aktualizuje się, gdy zmienia się stan nadrzędny.

Czy coś mi umyka?

Twój kod ma dwa problemy.

Początkowy stan twojego komponentu podrzędnego jest ustawiany na podstawie właściwości.

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

Cytując z tej odpowiedzi SO :

Przekazanie stanu początkowego do komponentu jako a propjest anty-wzorcem, ponieważ getInitialStatemetoda (w naszym przypadku konstruktor) jest wywoływana tylko przy pierwszym renderowaniu komponentu. Nigdy więcej. Oznacza to, że jeśli ponownie wyrenderujesz ten komponent, przekazując inną wartość jako a prop, komponent nie zareaguje odpowiednio, ponieważ zachowa stan z pierwszego renderowania. Jest to bardzo podatne na błędy.

Jeśli więc nie możesz uniknąć takiej sytuacji, idealnym rozwiązaniem jest zastosowanie tej metody componentWillReceiveProps nasłuchiwania nowych rekwizytów.

Dodanie poniższego kodu do komponentu podrzędnego rozwiąże problem z ponownym renderowaniem komponentu podrzędnego.

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

Drugi problem dotyczy fetch.

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

A oto działające skrzypce: https://jsfiddle.net/o8b04mLy/

Jest kilka rzeczy, które musisz zmienić.

Po fetchotrzymaniu odpowiedzi nie jest to plik json. Szukałem, jak mogę uzyskać ten plik json i odkryłem ten link .

Z drugiej strony, musisz pomyśleć, że constructorfunkcja jest wywoływana tylko raz.

Dlatego musisz zmienić sposób pobierania danych w <Child>komponencie.

Tutaj zostawiłem przykładowy kod: https://jsfiddle.net/emq1ztqj/

Mam nadzieję że to pomogło.