Ich versuche, eine nette ApiWrapper-Komponente zu erstellen, um Daten in verschiedenen untergeordneten Komponenten zu füllen. Nach allem, was ich gelesen habe, sollte dies funktionieren: 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')
);
Aus irgendeinem Grund wird die untergeordnete Komponente anscheinend nicht aktualisiert, wenn sich der übergeordnete Status ändert.
Vermisse ich hier etwas?
nextProp
kein erneutes Rendern ohne ausgelöst wirdcomponentWillReceiveProps(nextProps)
?static getDerivedStateFromProps(nextProps, prevState)
reactjs.org/docs/…Es gibt einige Dinge, die Sie ändern müssen.
Wenn
fetch
Sie die Antwort erhalten, handelt es sich nicht um einen JSON. Ich habe gesucht, wie ich diesen JSON bekommen kann und habe diesen Link entdeckt .Auf der anderen Seite müssen Sie denken, dass die
constructor
Funktion nur einmal aufgerufen wird.Sie müssen also die Art und Weise ändern, in der Sie die Daten in der
<Child>
Komponente abrufen .Hier habe ich einen Beispielcode hinterlassen: https://jsfiddle.net/emq1ztqj/
Ich hoffe das hilft.
quelle
<Child>
Komponente die neuen Daten abrufthttps://jsonplaceholder.typicode.com/posts/1
und erneut rendert.