私はReactjsで作業しています。正しく入力されていないとエラーが発生します。
サンプルコードは、次のとおりは直ちに新しい値を取得できません。
handleChange: function() {
if(shares) {
this.setState({
error_shares:''
})
}
if(this.state.error_shares === ''){
console.log('entered!!')
}
}
ここerror_stateの値は、はい、それが所望の挙動である次
場合に変更された値を反映していません。
値が更新されなかった理由は、コンポーネントがまだ再レンダリングされていないためです。
このような機能が必要な場合は、componentDidUpdateコールバックを使用する必要があります。
ライフサイクルメソッドhereを参照してください。
EXPLANATION：、2のいずれかの変化がトリガされた場合
各コンポーネントはexternal props + internal state
の関数である：ここで
は、作品をどのように反応するかでありますコンポーネントは再レンダリングのためにキューに入れられます（クライアントアプリケーションがブロックされないように非同期です）。
操作の正確な順序については上のリンクを参照してくださいが、ここでは少し概念の証明です。確かに
import React from 'react';
class Example extends React.Component {
constructor(props, context) {
super(props, context);
// initial state
this.state = {
clicked: false
};
}
componentDidUpdate(prevProps, prevState) {
console.log(this.state.clicked); // this will show "true"
}
render() {
return (
<button
onClick={() => {
this.setState({clicked: true});
}}
>
</button>
);
}
}
少し詳しく説明していただけますか？あなたは私に希望を与えた –
@niravjobanputra私はコードを追加しました。 – activatedgeek
はい、。
setState（）はthis.stateをただちに変更するのではなく、保留状態遷移を作成します。このメソッドを呼び出した後this.stateにアクセスすると、潜在的に既存の値が返される可能性があります。
それで解決策は何ですか？ –
@activatedgeekはすでに良い答えをくれました。 –
いいえあなただけSETSTATE後にコンソールに更新値を取得することはできません。これは、setStateが呼び出されるとすぐに、ビューが再レンダリングされるためです。したがって、更新された値を取得するには、あなたがrender() .
render(){
if(this.state.error_shares === ''){
//your code.
}
}
実際に私は 'console'の代わりにapiを呼び出しています。このシーケンスをどうにかして実行したいです。 –
あなたのアプローチは間違っています。なぜあなたは火をsetStateし、あなたのAPIを呼び出すよりも望んでいますか？ APIの応答後、setStateを呼び出す必要があります。イベントを使用して処理します。 – Ved
setStateの内側にそれを確認することができますすることは本質的に非同期です。
第2の（オプションの）パラメータは、setStateが完了してコンポーネントが再描画されると が実行されるコールバック関数です。
このようにすることができます。
handleChange: function() {
if (shares) {
this.setState({
error_shares: ''
}, function() {
if (this.state.error_shares === '') {
console.log('entered!!')
}
})
}
}
源：https://facebook.github.io/react/docs/component-api.html#setstate
'setState'が非同期動作です。あなたはおそらくこれを行う必要はありません、そうですか？ – azium
はいそれはありますが、すぐには機能しません。このためには、linkstate mixinが必要です。しかし、まだ動作していません –
確かに私はあなたがあなたがあなたが問題を抱えていた実際のコードを投稿しなかったかもしれないことをあなたが空文字列かどうかを知るために 'shares'が真であるかどうかをチェックできると。 – azium