RESTAPIバックエンドをセットアップしています。getInitialStateコンポーネントの関数内に値を設定したいのですが、非同期のhttpリクエストを使用しているため、返す必要のあるオブジェクトにデータを入力する方法がわかりません。予想どおり、返されるオブジェクトの値は未定義です。どうすればこれを回避できますか？
現在、フェッチを使用しています（正直なところ、他のライブラリに切り替えることができます）。getInitialState非同期呼び出しが発生する前ではなく、何らかの値を返した後に呼び出す方法がわかりません。
import React from 'react';
import 'whatwg-fetch';
export default class IndexPage extends React.Component {
render() {
// I basically need to call getInitialState after the last promise has been resolved
fetch('https://localhost:3000/api/aye')
.then(function(response) {
return response.json();
})
.then(function(json) {
// Need to return some values from this.
});
return (
<div>
<h1>{this.state.jsonReturnedValue}</h1>
</div>
);
}
}
前もって感謝します！
値this.setStateを変更するには、を呼び出す必要がありstateます
export default class IndexPage extends React.Component {
constructor() {
super();
this.state = {
jsonReturnedValue: null
}
}
componentDidMount() {
fetch('https://localhost:3000/api/aye')
.then(response => response.json())
.then(json => {
this.setState({ jsonReturnedValue: json });
});
}
render() {
return (
<div>
<h1>{ this.state.jsonReturnedValue }</h1>
</div>
);
}
}この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加