在父装卸后停止子更新

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); 
    }, 

    ... 

}