El componente secundario de React no se actualiza después del cambio de estado principal

Estoy intentando crear un buen componente ApiWrapper para completar datos en varios componentes secundarios. De todo lo que he leído, esto debería funcionar: 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')
);

Pero por alguna razón, parece que el componente secundario no se actualiza cuando cambia el estado principal.

¿Me estoy perdiendo de algo?

Hay dos problemas con su código.

El estado inicial de su componente secundario se establece a partir de props.

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

Citando esta respuesta SO :

Pasar el estado inicial a un componente como un propes un anti-patrón porque el getInitialStatemétodo (en nuestro caso el constructor) solo se llama la primera vez que el componente se procesa. Nunca mas. Lo que significa que, si vuelve a renderizar ese componente pasando un valor diferente como a prop, el componente no reaccionará en consecuencia, porque el componente mantendrá el estado de la primera vez que se renderizó. Es muy propenso a errores.

Entonces, si no puede evitar tal situación, la solución ideal es usar el método componentWillReceivePropspara escuchar nuevos accesorios.

Agregar el siguiente código a su componente secundario resolverá su problema con la reproducción del componente secundario.

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

El segundo problema es con fetch.

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

Y aquí hay un violín que funciona: https://jsfiddle.net/o8b04mLy/

Hay algunas cosas que debes cambiar.

Cuando fetchobtenga la respuesta, no es un json. Estaba buscando cómo puedo obtener este json y descubrí este enlace .

Por otro lado, debe pensar que la constructorfunción se llama solo una vez.

Por lo tanto, debe cambiar la forma en que recupera los datos en <Child>component.

Aquí, dejé un código de ejemplo: https://jsfiddle.net/emq1ztqj/

Espero que eso ayude.