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?
nextProp
no activará una nueva renderización sincomponentWillReceiveProps(nextProps)
?static getDerivedStateFromProps(nextProps, prevState)
reactjs.org/docs/…