使消息在反应一段时间后消失

Question

我目前正在使用react.js应用程序并在后端使用express。能够在表单提交时从后端获取和显示响应(消息)，但我希望它在一段时间后消失。有人可以告诉我如何去做吗？ 我知道如何在普通的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

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

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

Answer 2

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

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 3

你可以这样尝试

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

Answer 4

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

Redux 免费答案：setState可以采用回调函数。 此回调可能负责隐藏超时的消息。

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