reactjs - instalar - react js installation

Reaccionar componente secundario que no se actualiza después del cambio de estado primario

Question

Estoy intentando hacer un buen componente ApiWrapper para llenar 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 primario.

¿Me estoy perdiendo de algo?

Answer 1

Hay algunas cosas que debes cambiar.

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

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

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

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

Espero que eso ayude.

Answer 2

Hay dos problemas con su código.

El estado inicial de su componente hijo se establece a partir de accesorios.

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

Citando de esta respuesta SO :

Pasar el estado inicial a un componente como prop es un antipatrón porque el getInitialState (en nuestro caso, el constructor) solo se llama la primera vez que se representa el componente. Nunca mas. Lo que significa que, si vuelve a representar ese componente pasando un valor diferente como prop , el componente no reaccionará en consecuencia, porque el componente mantendrá el estado desde la primera vez que se procesó. Es muy propenso a errores.

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

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

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

El segundo problema es con la 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/