React：让闪现信息自动消失

Question

我现在正在为我的 React 应用程序实现 Rails 类似快速消息传递的功能。 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。

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

您很可能想将其传递给超时函数。

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

此外，通过使用箭头符号，您可以有效地将 this 绑定到您的组件，因此您可以跳过保存对 this.

的引用

Answer 2

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

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

因为您已经使用过 arrow function，所以不需要使用 _this。只需使用 this.

React：让闪现信息自动消失

React: Make flash message disappear automatically

javascript

reactjs

flash-message