正确卸下反应组件

Question

抱歉，我无法为这个问题提供更具体的标题。 当我执行以下代码片段时，会收到以下警告：

警告：setState（...）：只能更新已安装或正在安装的组件。 这通常意味着您在未安装的组件上调用了setState（）。 这是无人值守。 请检查Typewriter组件的代码。

但是，如果MyComponent中的render（）更改为以下内容，则不会收到这样的警告：

render() {
  return (
    <div>
      <h1>
        <Typewriter />
        { this.state.render == 1 && "Render 1" }
        { this.state.render == 2 && "Render 2" }
        { this.state.render == 3 && "Render 3" }
      </h1>
    </div>
  );
}

如何正确卸载本身正在执行某些安装和卸载操作的呈现的Typewriter组件？ 谢谢！

 class Typewriter extends React.Component { constructor(props) { super(); this.state = { finalText: '' } this.typeWriter = this.typeWriter.bind(this); } typeWriter(text, n) { if (n < (text.length)) { if (n + 1 == (text.length)) { let j = text.substring(0, n+1); this.setState({ finalText: j }); n++; } else { let k = text.substring(0, n+1) + '|'; this.setState({ finalText: k }); n++; } setTimeout( () => { this.typeWriter(text, n) }, 100 ); } } componentDidMount() { this.typeWriter('testing_typewriter', 0); } render() { return ( <div> { this.state.finalText } </div> ); } } class MyComponent extends React.Component { constructor(props) { super(); this.state = { render: 1, update: false }; this.interval = null; } componentDidMount() { this.interval = setTimeout( () => this.rendering(), 1700 ); } componentWillUpdate(nextProps, nextState) { if (this.state.render < 3) { this.interval = setTimeout( () => this.rendering(), 1200 ); } } componentWillUnmount() { clearInterval(this.interval); this.interval = null; } rendering() { if (this.state.render < 3) { if (this.interval) { this.setState({ render: this.state.render + 1 }); } } } render() { return ( <div> <h1> { this.state.render == 1 && "Render 1" } { this.state.render == 2 && <Typewriter /> } { this.state.render == 3 && "Render 3" } </h1> </div> ); } } ReactDOM.render(<MyComponent />, app); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="app"></div> 

Answer 1

我有一个类似的问题，我通过清除componentWillUnmount函数中的Timeout / Interval解决了它

在打字机功能中，您需要跟踪此超时：

setTimeout( () => { this.typeWriter(text, n) }, 100 );

用类似的东西

this._timer = setTimeout( () => { this.typeWriter(text, n) }, 100 );

然后添加生命周期方法：

componentWillUnmount() {
  window.clearTimeout(this._timer);
}