新しい小道具が渡されたとき子コンポーネントの状態が更新されない

Question

親コンポーネントから渡された小道具に基づいて表示されるカスタムのモーダルコンポーネントをレンダリングしています。小道具isVisibleは最初にfalseであり、ボタンを介して親コンポーネントで更新されます。私はレンダリング機能のconsole.logステートメントを介してコンポーネントの状態をチェックしています。コンポーネントが最初に初期化されると、期待どおりに​​がログに記録されますが、isVisibleが更新されると、false trueが返されます。なぜ州は小道具で更新されていないのですか？

class MyModal extends React.Component { 
    constructor(props) { 
    super(props); 
     this.state = { 
     createModalVisible:props.isVisible, 
     }; 

    setCreateModalVisible = (visible) => { 
    this.setState({createModalVisible:visible}); 
    } 

    componentWillMount(){ 
    this.setCreateModalVisible(this.props.isVisible); 
    } 

    } 
    render() { 
    console.log(this.state.createModalVisible,this.props.isVisible); 

    return (//modal stuff) 
    } 
} 
export default MyModal 

私はこれはおそらくかなり基本的なコンポーネントのライフサイクルのものであるが、私はドキュメントからそれを把握し、反応するように、かなり新しいですができなかったことを取得します。

Answer 1

constructorおよびcomponentWillMountは、DOMツリーにマウントされたコンポーネントごとに1回だけ実行されるため、渡された各小道具で状態は更新されません。

this.stateは、各コンポーネントインスタンスに対してローカルであり、各レンダリングパスで更新された状態オブジェクトを使用できるように、this.setState()で更新する必要があります。

componentWillReceivePropsを使用して、必要なものを得るために渡される新しい小道具を反映するように状態を設定できます。