1
でSETSTATEとのトラブル
を、サーバー側のレンダリングのためにcomponentWillMountでデータを取得しようとしたとき、私は警告を得た:が反応:componentWillMount
警告:SETSTATE(...):のみ実装部品を更新することができます。これは通常、サーバー上のcomponentWillMount()の外側でsetState()を呼び出したことを意味します。これはノーオペレーションです。ここ
は、コードスニペットです:
async fetchProductsSSR() {
var response = await fetch(BACKEND_URL + '/products/', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
});
var result = false;
var data = await response.json();
console.log(response.status);
if (response.status === 200) {
}
else {
data = [];
}
return data;
}
async componentWillMount() {
if (!process.browser) {
var data = await this.fetchProductsSSR();
this.setState({
product_data: data
});
}
}
私はデータを呼び出しthis.setState前に正しかったと確信しています。私が間違っているのか分からない
ハードコードJSONデータならば、すべてが
async componentWillMount() {
if (!process.browser) {
// var data = await this.fetchProductsSSR();
var data = [
{
"name": "Test",
}
]
this.setState({
product_data: data
});
}
}
結構ですとしてくださいアドバイス、 はあなたに感謝。私は健二さんのコメントに同意
なぜ、componentDidMountでそのajax呼び出しを行いませんか? componentDidMountメソッドでajaxリクエストを行うことをお勧めします。これはthis.setStateがコンポーネントを再レンダリングするためで、componentWillMountでajaxリクエストを行うとコンポーネントがレンダリングされず、更新するものがありません。 –
上記のコメントは正しいですが、問題を修正するには、データが定義されているときにsetStateを実行します。つまり、if(data)this.setState({product_data:data}) 'です。これにより、未定義の値を状態 –
@Kenjiとして設定しようとしないようにします。これは、componentWillMountでデータを取得する理由がサーバー側のレンダリングであるためです。私はユーザーに提示されたときにページ全体を準備する必要があります。 – winxp1981