2016-06-27 5 views
4

は、私はそうのようなコンポーネントの状態を初期化するとしましょう:私はちょうど私が以下であったと言われたそれらのいずれかの状態を変更したい場合は、ReactでsetState()を省略することはできますか?

getInitialState: function(){ 
    return {name: "Bob Smith", 
      phone: "555-555-5555", 
      location: "San Francisco, CA", 
      best-friend: "Bill Jacobson", 
      favorite-color: "Orange"} 
}, 

無無ありません:

this.state.name = "John Smith"; 

むしろ私が使用する必要があります。

this.setState({name: "John Smith", 
       phone: this.state.phone, 
       location: this.state.location, 
       best-friend: this.state.best-friend, 
       favorite-color: this.state.favorite-color}); 

これを行うには、より効率的な方法があるに違いありません。私の状態オブジェクトのただ1つのプロパティを、反応するのに安全な方法で変更する簡潔な方法はありますか?

答えて

8

実際、すべての値を指定する必要はありません。あなたが新しい価値を持ちたいと思うものだけ。

setStateは、あなたの状態に値を追加(または後で上書き)します。オブジェクト全体を再作成することはありません。

関連文書hereがあります。 Facebookの開発者は、あなたがここに提起まったく同じ質問について考え、フードの下で、彼らは古い値を維持し、私はここに引用しています:

最初の引数が更新するゼロ以上のキーを含むオブジェクト(することができ)または更新するキーを含むオブジェクトを返す関数(状態と小道具の関数)です。

+0

でこれが唯一のトップレベルの状態のために働くことに注意してください。ネストされた状態でこれを行うことはできません。 – jaybee

+0

これは完璧なおかげです!好奇心の理由から、なぜFacebookはこれを好きではないのですか?this.state.name = newValueを使用するのが慣習ではないのですか? 編集:私はドキュメントの20行をスクロールダウンして、これだけ自分自身に答えました!元の答えをありがとう。 – FactorialTime

+0

@EllDoubleYew変更が非常に簡単に失われる可能性があるためです。 Reactがあなたのために行う内部コンポーネント状態管理と、あなたにさらされているすべてのコンポーネントライフサイクルメソッドは、直接的な外部値設定とうまく連携しません。これは、Reactが不変のデータ構造と関連している理由の1つであり、なぜFluxアーキテクチャが完全な(Flux、Redux、または他の実装であれ)大きな画像に適合するのかです。 –

2

はい、Reactに組み込まれています。 Elodの言っているように、変化している状態を指定するだけです。残りの国は同じままです。

getInitialState: function() { 
    return { 
    name: "Bob Smith", 
    phone: "555-555-5555", 
    location: "San Francisco, CA", 
    } 
} 

// Somewhere else... 
this.setState({ 
    name: "John Smith", 
}) 

this.state

{ 
    name: "John Smith", 
    phone: "555-555-5555", 
    location: "San Francisco, CA", 
} 
関連する問題