反應：使閃光消息自動消失

我現在在我的React應用中實現了像Flash消息這樣的Rails。閃光消息本身很好，但現在我想讓閃光消息在某些頁面中自動消失。我起初在我的Flash組件中使用了setTimeout，但收到了這個錯誤。未被捕獲的錯誤：不變違例：enqueueCallback（...）：您使用不可調用的回調調用了setProps，replaceProps，setState，replaceState或forceUpdate。反應：使閃光消息自動消失

這是代碼。

import React from 'react/addons'; 

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 

class Flash extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     message: this.props.message 
    } 
    } 

    componentWillReceiveProps(nextProps) { 
    let _this = this; 
    this.setState({ 
     message: nextProps.message 
    }); 
    if (nextProps.autoDisappear) { 
     window.setTimeout(() => { 
     _this.setState({ 
      message: null 
     }, 2000) 
     }) 
    } 
    } 

    onClick(e) { 
    this.setState({ 
     message: null 
    }); 
    } 

    render() { 
    let transitionName = "flash-anim" 
    if (this.state.message) { 
     return (
     <ReactCSSTransitionGroup transitionAppear={true}　transitionName={transitionName} transitionEnterTimeout={200} transitionLeaveTimeout={300}> 
      <div className="flash-container" id="flash-component"> 
      <div className="alert"> 
       <a className="close alert-close" onClick={this.onClick.bind(this)}>x</a> 
       {this.state.message} 
      </div> 
      </div> 
     </ReactCSSTransitionGroup> 
    ); 
    } else { 
     return <ReactCSSTransitionGroup transitionAppear={true}　transitionName={transitionName} transitionEnterTimeout={200} transitionLeaveTimeout={300} />; 
    } 
    } 
} 

export default Flash;

我考慮用其他方法來解決這個問題，但到目前爲止還沒有想法。你有什麼想法來解決這個問題嗎？

來源

2015-11-18 Atsuhiro Teshima

看來你正試圖通過2000作爲第二個參數this.setState而不是setTimeout。它應該是：

window.setTimeout(() => { 
    this.setState({ 
    message: null 
    }); 
}, 2000);

而當你已經使用arrow function所以沒有必要使用_this。只需使用this。

來源

2015-11-18 11:29:21

謝謝你的回答。是的，它的工作。我應該檢查兩次。另外，感謝您提供有關'this'的建議。 –

您試圖將整數2000作爲回調傳遞給this.setState。

window.setTimeout(() => { 
    _this.setState({ 
     message: null 
    }, 2000) 
});

您很可能想將它傳遞給超時函數。

window.setTimeout(() => { 
    _this.setState({message: null}); 
}, 2000);

還用箭頭符號表示您有效地結合this到您的組件反正，這樣你就可以跳過保存參考this。

來源

2015-11-18 11:26:19

謝謝你的回答，是的，它現在有效。因爲龍早些時候回答。我把他的答案設定爲正確的答案，但你的答案都奏效了。 –

不用擔心！我不這樣做的代表。很高興它的工作！ –

反應：使閃光消息自動消失

回答

相關問題