Question

我目前正在使用react.js应用并在后端使用快递。能够在表单提交时从后端获取并显示响应（消息），但我希望在某个时间后消失。有人可以告诉我如何去做。我知道如何在普通的JavaScript中... 我想要反应方式。 以下是我的代码

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

例如，您可以在设置消息时启动计时器，而不是在安装组件时启动计时器。

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})
      this.hideTimeout = setTimeout(() => this.setState({message: ''}), 3000)
    })
    .catch(err => console.log(err)
  );
  }

  // clean up in case there is pending update
  componentWillUnmount() {
    clearTimeout(this.hideTimeout)
  }

 /* you don't need this
  componentDidMount(){
    setTimeout(() => this.setState({message:''}), 3000);
  } */

  // rest of your code
}

或者您可以使用componentDidUpdate方法检查this.state是否有消息，而prevState有空消息并在此情况下开始超时。

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)
  );
  }

  componentDidUpdate(_, prevState){
    if (this.state.message && !prevState.message) {
      this.hideTimeout = setTimeout(() => this.setState({message:''}), 3000);
    }
  }

  // clean up in case there is pending update
  componentWillUnmount() {
    clearTimeout(this.hideTimeout)
  }

  // rest of your code
}

Answer 2

使用componentDidUpdate生命周期，在组件更新后立即调用

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

Answer 3

我没有代表发表评论，所以我在这里添加...

Redux免费回答：setState可以采取回调函数。这个回调可以负责在超时时隐藏消息。

您还可以使用redux + redux-saga，它具有delay()功能，可用于在xx秒后调度重置/清除消息的新操作。

Answer 4

您可以尝试这样

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})
      setTimeout(() => this.setState({message:''}), 3000);
    })
    .catch(err => console.log(err)
  );
  }

  componentDidMount(){
    this.setState({message:''})
  }

  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

在做出反应之后，消息会消失

4 个答案: