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

我现在正在我的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;

从“React/addons”导入React；
var reactcstransitingroup=React.addons.cstransitingroup；
类Flash扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
消息：this.props.message
}
}
组件将接收道具（下一步）{
让_this=this；
这是我的国家({
消息：nextrops.message
});
如果（下一步自动消失）{
window.setTimeout（（）=>{
_这是我的国家({
消息：空
}, 2000)
})
}
}
onClick（e）{
这是我的国家({
消息：空
});
}
render（）{
让transitionName=“flash动画”
if（this.state.message）{
返回(
x
{this.state.message}
);
}否则{
返回；
}
}
}
导出默认Flash；

---

我考虑其他方法来解决这个问题，但到目前为止还不知道。您有什么办法解决这个问题吗？

您试图将整数

2000

作为回调传递给

this.setState

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

您很可能希望将其传递给timeout函数

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

---

另外，通过使用箭头符号，您可以有效地将

this

绑定到组件，因此您可以跳过保存对

this

的引用您试图将整数

2000

作为回调传递给

this.setState

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

您很可能希望将其传递给timeout函数

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

---

另外，通过使用箭头符号，您可以有效地将

this

绑定到组件，因此您可以跳过保存对

this

的引用，似乎您正试图将2000作为第二个参数传递给

this.setState

，而不是

setTimeout

。应该是：

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

---

由于您已经使用了

箭头功能

，因此无需使用此功能。只需使用

this

似乎您正试图将2000作为第二个参数传递给

this.setState

，而不是

setTimeout

。应该是：

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

---

由于您已经使用了

箭头功能

，因此无需使用此功能。只需使用

这个

谢谢你的回答。是的，成功了。我应该检查两次。另外，谢谢你关于“这个”的建议。谢谢你的回答。是的，成功了。我应该检查两次。另外，谢谢你关于“这个”的建议。谢谢你的回答，是的，它现在起作用了。因为我早就回答了。我认为他的答案是正确的，但你的两个答案都有效。不用担心！我这样做不是为了代表。很高兴它起作用了！谢谢你的回答，是的，现在可以了。因为我早就回答了。我认为他的答案是正确的，但你的两个答案都有效。不用担心！我这样做不是为了代表。很高兴它起作用了！