反応jsの小道具からuiを更新します。反応中のハンドオフ状態の小道具

Question

reactjsとreduxビルドで自分の小道具が変更されたときにUIを更新する方法がわかりません。これは比較的普通で簡単な問題のようですが、私はそれに苦労しています。私は、これを取り巻く反応からの文書が悲惨なほど不十分であることを発見しましたhttps://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops（簡単な説明と例は1つの段落）。私はこれを新しい正しいes6形式で見たいと思います。 私が理解しているように、私は自分の小道具をセットし、結びついて自分の状態を更新することができます。私は最初の小道具を設定して、要求された小道具が決して空でないようにしました私は州のために同じことをしたし、レンダリングや私の州のツリーにそれのどれも表示されません。

私はcomponentWillReceivePropsを使用してUIを更新するためにこれを見つけた私の初期状態を設定するためにこれを発見し、

export default class MyComponent extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = { userBirthdate: '1/2/1982', }; 
    } 
} 

それを使用している（）

componentWillReceiveProps(nextProps) { 
    this.setState({ 
    userBirthdate: nextProps.userBirthdate 
    }); 
} 

しかし、私は反応するインスペクタに目を通します私のコンテナの状態はありません（状態の下のインスペクタに「空のオブジェクト」というメッセージが表示されます）。小道具が更新され、私のユーザーの選択が反映されます。私が新しい要素を選択するとき、それはreduxに反映され、私が使用している右の小道具を満たしますが、それらは状態に渡されません。

これについてのお手伝いがあれば幸いです。

Answer 1

ライフサイクル機能shouldComponentUpdateが必要なデータが小道具を通って来ている場合は、あなたがする必要がある場合を除き、状態にそれを「同期」を心配していないあなたのための

export default class MyComponent extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = { userBirthdate: '1/2/1982', }; 
    } 
    shouldComponentUpdate(nextProps, nextState) { 
    if(this.props.userBirthdate !== nextProps.userBithdate) { 
     return true; 
    } 
    } 
} 

Answer 2

を移動するための方法になりますように見えますコンポーネント内で操作します。

代わりに、ちょうど例えば、直接小道具を使用します。

export default class MyComponent extends React.Component{ 

    static defaultProps = { 
    userBirthdate: '1/2/1982' 
    }; 

    render() { 
    const { userBirthdate } = this.props; 
    return <span>DOB: {userBirthdate}</span>; 
    } 
}