在父裝卸後停止子更新

Question

小問題 - 不確定如何處理其父裝卸後停止更新的問題。

目前我有一個'視圖'（父）嵌套的TextField組件。

我TextField組件實現了輸入與TextField組件的onblur

<input type={this.props.type} name={this.props.name} onBlur={this.handleBlur} ... /> 

兩個功能是現在

hideClear: function() { 
    // to prevent clear button from disappearing when clicking on it 
    if (!this.state.keepFocus) { 
     this.setState({inFocus: false}); 
    } 
}, 
handleBlur: function (e) { 
    e.preventDefault(); 
    this.setState({keepFocus: false}); 
    window.setTimeout(this.hideClear, 200); 
}, 

，當我的父母卸裝，而我的輸入字段具有焦點，我回來

警告：setState（...）：只能更新已安裝或已安裝的組件。這通常意味着您在卸載的組件上調用了setState（）。這是一個沒有操作。請檢查TextField組件的代碼。

我希望我可以得到一些關於如何處理這種情況的好建議。

謝謝:)

Answer 1

由於錯誤說，你要更新組件的狀態，當組件已經被卸載，這是由於您在handlerBlur()功能有定時器。

我願意認爲，我不是很確定，但只要組件被卸載了輸入失去焦點，並因此onBlur事件被觸發射擊您handleBlur()功能，從而設置與setTimeout定時器基本上更新組件的狀態通過hideClear()函數已被卸載後。

一個最佳的解決方案是找到setState（）可能在某個組件被卸載後被調用的地方，然後修復它們。當組件正在等待某些數據並在數據到達之前取消掛載時，這種情況通常會由於回調而發生。理想情況下，在卸載之前，應在componentWillUnmount中取消任何回調。

以上報價摘自React developer's blog。

解決此問題的一種快速方法是將計時器的標識符存儲在實例變量中，以便在組件要卸載時使用window.clearTimeout來清除定時器。

var MyComponent = React.createClass({ 

    timerId = 0, 

    ... 

    handleBlur: function (e) { 
    e.preventDefault(); 
    this.setState({keepFocus: false}); 
    this.timerId = window.setTimeout(this.hideClear, 200); 
    }, 

    componentWillUnmount: function() { 
    if (this.timerId) 
     window.clearTimeout(this.timerId); 
    }, 

    ... 

}