反应：使闪光消息自动消失

Question

我现在正在为我的 React 应用程序实现 Rails 之类的 Flash 消息。Flash 消息本身很好，但现在我希望 Flash 消息在某些页面中自动消失。我最初在我的 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;

我考虑了其他方法来解决这个问题，但目前还不知道。你有什么想法来解决这个问题吗？

Answer 1

似乎您试图将 2000 作为第二个参数传递给this.setState而不是setTimeout. 它应该是：

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

由于您已经使用过，arrow function因此无需使用 _this。只需使用this.