Question

我现在正在向我的React应用程序实现像闪存消息一样的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;

我考虑用其他方法解决这个问题，但到目前为止还不知道。你有任何想法解决这个问题吗？

Answer 1

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

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

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

Answer 2

您尝试将整数2000作为回调传递给this.setState。

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

您很可能希望将其传递给超时功能。

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

另外，使用箭头符号，您无论如何都有效地将this绑定到您的组件，因此您可以跳过保存对this的引用。

反应：使Flash消息自动消失

2 个答案: