的setState改變狀態，但不會重新渲染

第二個問題，從我的第一反應項目，不抓，爲什麼我似乎不能影響在組件渲染。我讀過很多關於React在調用setState（除非使用shouldComponentUpdate）時重新呈現組件和子組件的帖子，但在我的組件中，我使用console.log看到了自己的狀態更改，不過在我的組件中，實際內容不會重新呈現。的setState改變狀態，但不會重新渲染

下面，你會看到什麼，我試圖做一個骨架。此DisplayLightbox組件接受從母體成分的showLightbox =真丙顯示它（當CSS類磅活性被添加到div，隱藏顯示變得）。當我點擊圖像上的onClick，我看到新的URL改變狀態displayImage使用功能的console.log（this.state.activeImage）的內部，使得似乎不錯，但沒有在渲染的變化。我甚至已經添加了狀態activeImage作爲一個div類，只是爲了看看是否顯示新的URL - 不，只是顯示初始/圖像。

如果我通過將lightboxValue設置爲false關閉Lightbox並將其重新打開，將其設置爲true，它確實會尊重新狀態並顯示第二個圖像。

我猜這可能與從父母打開有關，但我有其他組件從狀態改變，因此我有點困惑，爲什麼這個不尊重它是新的狀態。

感謝

class DisplayLightbox extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     showLightbox: false, 
     lightboxValue: null, 
     activeImage: 'path/to/initial/image' 
    }; 
    // I saw others recommend binding, not sure I'm using this right 
    this.displayImage = this.displayImage.bind(this); 
    } 

// as I understand it, this should be unnecessary, as it should be true by default 
    shouldComponentUpdate(nextProps) { 
    return true 
    } 


    displayImage(newImage){ 

    if(newImage){ 
     this.state = { 
     activeImage: newImage, 
     }; 
    } 
    console.log(this.state.activeImage) // when I click the onClick below, I see the new change in my console to the new image path, so the state is changing 

    return this.state.activeImage 
    } 


    render() { 

    var lbActive = (this.props.showLightbox === true) ? "lb-active" : "" 

    return <div className={"lightbox " + lbActive }> 
     <div className={"lightbox-content " + this.state.activeImage} > 
     <img src={this.state.activeImage} onClick={() => this.displayImage('path/to/NEW/image')} 
     /> 
     </div> 
    </div>; 
    } 
}

來源

2017-09-18 user1932694

從來沒有（！）直接改變'this.state'。總是使用'setState（）'。 – Chris

爲了更新你需要調用它的功能及不直接設置其屬性的狀態。

相反的：

this.state = { 
    activeImage: newImage 
}

化妝用的：

this.setState({ 
    activeImage: newImage 
})

注意this.setState爲asynchronous，因此this.state.activeImage不會對下一行進行更新（如果你嘗試console.log之後）

來源

2017-09-18 15:25:49 mersocarlin

太棒了！這樣可行。我會繼續我自己過了多久，有多少東西試圖伸手利弊之前解決這個問題。感謝您爲我澄清這一點。 – user1932694

的setState改變狀態，但不會重新渲染

回答

相關問題