javascript - React: Make flash message disappear automatically - Stack Overflow

admin管理员组

文章数量:1356840

I'm now implementing Rails like flash messaging to my React app. The flash message itself is fine but now I want the flash message to disappear automatically in some pages. I at first used setTimeout in my Flash ponent but received this error.

Uncaught Error: Invariant Violation: enqueueCallback(...): You called setProps, replaceProps, setState, replaceState, or forceUpdate with a callback that isn't callable.

Here is the code.

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
    }
  }

  ponentWillReceiveProps(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-ponent">
            <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;

I consider other way to resolve this, but so far no idea. Do you have any idea to resolve this issue?

I'm now implementing Rails like flash messaging to my React app. The flash message itself is fine but now I want the flash message to disappear automatically in some pages. I at first used setTimeout in my Flash ponent but received this error.

Uncaught Error: Invariant Violation: enqueueCallback(...): You called setProps, replaceProps, setState, replaceState, or forceUpdate with a callback that isn't callable.

Here is the code.

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
    }
  }

  ponentWillReceiveProps(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-ponent">
            <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;

I consider other way to resolve this, but so far no idea. Do you have any idea to resolve this issue?

• javascript
• reactjs
• flash-message

Share Improve this question Follow edited Nov 18, 2015 at 16:06 akmozo 9,83933 gold badges2929 silver badges4444 bronze badges asked Nov 18, 2015 at 11:17 Atsuhiro TeshimaAtsuhiro Teshima 1,51811 gold badge1212 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

It seems that you are trying to pass 2000 as second parameter to this.setState instead of setTimeout. It should be:

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

And as you already used arrow function so no need to use _this. Just use this.

You're trying to pass the integer 2000 as a callback to this.setState.

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

You most likely want to pass that to the timeout function instead.

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

Also by using the arrow notation you're effectively binding this to your ponent anyways, so you can skip saving a reference to this.

本文标签： javascriptReact Make flash message disappear automaticallyStack Overflow