爲什麼ReactJS在setTimeout中調用setState時會設置狀態？

在一個簡單的reactJS類中，this.setState（）並沒有真正設置狀態。我知道它是異步調用的，但即使組件再次渲染時，狀態也不會發生變化。所以this.state.showModal是false組件安裝（如預期），那麼它是true「永遠」。爲什麼ReactJS在setTimeout中調用setState時會設置狀態？

這裏有一個簡單的例子：

class MyComponent extends Component { 
    constructor (props) { 
    super(props) 

    this.state = { 
     showModal: false 
    } 

    this.showModal = this.showModal.bind(this) 
    this.hideModal = this.hideModal.bind(this) 
    } 
    showModal() { 
    this.setState({ showModal: true }) 
    } 
    hideModal() { 
    this.setState({ showModal: false }) 
    } 
    render() { 
    console.log(this.state.showModal) // Outputs true even after the hideModal() call 

    return (
     <Components> 
     <div onClick={this.showModal}> 
      { 
      this.state.showModal === true 
      ? <Modal 
       handles={handles} 
       close={this.hideModal} 
      /> 
      : '+' 
      } 
     </div> 
     </Components> 
    ) 
    } 
}

這裏的模態分量：

setTimeout(() => this.setState({ showModal: false }), 0)

：

class Modal extends Component { 
    render() { 
    return (
     <div className='configurator-modal'> 
     <button className='close' onClick={this.props.close}> x </button> 
     Modal 
     </div> 
    ) 
    } 
}

但是，當我有這樣的超時更換hideModal功能

狀態發生變化並呈現如預期的那樣。

我只是想知道爲什麼ReactJS可能可以在內部重置狀態或防止狀態發生變異？

編輯：調用hideModal和添加的ShowModal

來源

2017-10-19 3Dos

您需要顯示如何調用'hidemodal'？ – Panther

你能告訴我們你如何調用'hideModal'方法嗎？ – vs1682

我編輯了我的帖子，對不起，我試圖簡化代碼太多。 – 3Dos

既然沒有蹦蹦跳跳，我會猜測。

div是<Modal>的父級，當點擊事件在Modal上被觸發時，它也被傳播到div。所以showModal狀態被設置爲false通過hideModal()函數並且被設置回true通過showModal()函數。

當hideModal()使用setTimeout()時，在調用showModal()後調用它。

嘗試在hideModal()函數中添加event.stopPropagation函數，它可能工作。

或者，您應該添加showModal()作爲onClick處理程序的+符號而不是整個父div。請找到以下代碼：

<Components> 
    <div> 
     { 
     this.state.showModal === true 
     ? <Modal 
      handles={handles} 
      close={this.hideModal} 
     /> 
     : <div onClick={this.showModal}>'+'</div> 
     } 
    </div> 
    </Components>

來源

2017-10-19 09:43:57 learner

非常感謝。這工作完美。我絕對沒有想到，但它似乎超級邏輯！ – 3Dos

你有父元素在click處理過其稱之爲showModal，改變狀態設置爲true。

當您單擊close按鈕，將調用hideModal功能，這將狀態改變爲false但點擊將傳播到父元素爲好，這將調用showModal這使其再次true。因此它始終保持true。

解決方案：從父元素刪除showModal點擊處理程序，並把它放在正是你希望它是（我猜你想它+）。

來源

2017-10-19 09:43:04

爲什麼ReactJS在setTimeout中調用setState時會設置狀態？

回答

相關問題