reactjs - 在 react 一段时间后使消息消失

Question

我目前正在使用 react.js 应用程序并在后端使用 express。能够在表单提交时从后端获取并显示响应(消息)，但我希望它是 一段时间后消失 .有人可以告诉我如何去做。
我知道如何在普通的 javascript 中做到这一点......
我想要 react 方式。
下面是我的代码

import React, { Component } from 'react';
import axios from 'axios';

class Subscribe extends Component {
  state={
    message: ''
  }

  newSubscriber(newSubscriber){
    axios.post('/subscribe', newSubscriber)
    .then(res =>{
      // console.log(res.data.message)
      this.setState({message: res.data.message})
    })
    .catch(err => console.log(err)
  );
  }

  componentDidMount(){
    setTimeout(() => this.setState({message:''}), 3000);
  }

  onSubmit = e => {
    e.preventDefault();
    const newSubscriber = {
      email: this.refs.email.value
    }
    this.newSubscriber(newSubscriber);
  }
  render() {
    return (
      <form style={{marginTop:'20px'}} onSubmit={this.onSubmit}>
        <div style={{background:"green", color:"white", textAlign:"center"}}>{this.state.message}</div>
        <div className="form-group">
          <label htmlFor="email">Subscribe to get updates</label>
          <input type="email" ref="email" className="form-control" placeholder="Email address..." />
        </div>
        <button type="submit" className="btn btn-primary">Send</button>
      </form>
    );
  }
}

export default Subscribe

提前致谢。

Answer 1

使用 componentDidUpdate 组件更新后将立即调用的生命周期

componentDidUpdate(){
    setTimeout(() => this.setState({message:''}), 3000);
  }