Question

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之内无法更新）。渲染方法应该只是道具和状态的纯函数。”

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

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

Answer 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，也可以使用构造函数

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

Answer 2

这确实是一个棘手的概念，因为您不能更改渲染状态。我强烈建议您使用库来执行此操作。就我而言，我使用react-alert，效果很好。

AJAX响应后显示消息n秒

2 个答案: