AJAX 响应后显示消息 n 秒答案

【问题标题】：Display message for n seconds after AJAX responseAJAX 响应后显示消息 n 秒
【发布时间】：2019-03-12 08:40:37
【问题描述】：

在 AJAX 请求返回响应后，我想给用户一条反馈消息 5 秒 - 例如“已保存！”。

class FlashMessage extends Component {
  state = { visible: false }

  updateVisibility = () => {
    this.setState({ visible: true }, () =>
      this.setTimeout(this.setState({ visible: false }), 5000)
    )
  }

  render() {
    this.updateVisibility()
    if (this.props.data && this.state.visible) {
      return <div>Saved!</div>
    }
    return false
  }
}

export default FlashMessage

以上是我创建一个这样做的组件的徒劳尝试，但显然不起作用，因为你：

在现有状态转换期间无法更新（例如在render 内）。渲染方法应该是 props 和 state 的纯函数。”

所以我的问题是 - 如何在 AJAX 响应后显示一条消息 n 秒。

很遗憾，我不能在这里依赖onClick。

【问题讨论】：

ReactJS: setTimeout() not working?的可能重复
你不应该在 setState 中调用 setTimeout，而是在 setState 之后调用它。
代码中的 Ajax 调用在哪里？这也是您收到该警告的原因，因为您在渲染中调用了 this.updateVisibility() 函数，而该函数实际上正在执行 setState，这就是警告的原因。我会说你的渲染部分是完全错误的
@Think-Twice 提供的代码是父组件将响应对象传递给的子组件。如果您对如何改进代码有任何建议，我将不胜感激。
@RonF 但是我怎么才能更新呢？如上所述，updateVisibility 不能在 render 内运行。

标签： reactjs

【解决方案1】：

您应该执行以下操作。下面的代码完全符合您的要求，没有任何警告和正确的做事方式。

class FlashMessage extends Component {
  state = { visible: false }

  componentWillMount(){
    this.setState({ visible: true });
  }

  componentDidMount(){
    this.timer = this.setTimeout(()=> {this.setState({ visible: false })}, 5000)
  }

  componentWillUnMount(){
    clearTimeout(this.timer);
  }

  render() {
    return(
        <div>
            {this.props.data && this.state.visible ? "Yes, data received!" : "Data not received"}
        </div>
    )
  }
}

export default FlashMessage;

请不要在最新的 react 版本中弃用 componentWillMount，但如果您不想使用 componentWillMount，您也可以使用构造函数

如果您对上述代码有任何疑问，请告诉我。

【讨论】：

非常感谢?我不得不将componentDidMount中的代码更改为this.timer = setTimeout(() => {this.setState({ visible: false })}, 5000)，但除此之外它运行良好！
是的，我犯了愚蠢的错误，写 setTimeout :)
感谢您的指正。希望我所写的对你来说是清楚的。我是用手机回答的，所以没有编辑 setTimeout
超清晰！我刚刚编辑了更少的代码，删除了 updateVisibility 函数，因为它只被调用了一次。
@FellowStranger 是的，同意:)

【解决方案2】：

这是一个非常棘手的概念，因为您无法在渲染时更改状态。我强烈建议您使用图书馆来做到这一点。就我而言，我使用react-alert，效果很好。

【讨论】：

是的，我可能会同意。非常感谢！
如果有帮助 - 请将此答案标记为解决方案（：