當傳遞新道具時反應子組件狀態不更新

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樹中的每個組件運行一次，所以在傳遞的每個道具上狀態都不會更新。

this.state對於每個組件實例是本地的，需要更新爲this.setState()以便能夠在每個渲染通道上使用更新的狀態對象。

使用 componentWillReceiveProps您可以在其中設置狀態以反映傳遞給您的新的道具以獲得您需要的東西。