Question

提交表单后，

试图使后端提供的反馈从用户视图中消失。不确定该怎么做。该消息是在我的handlesubmit中生成的，如下所示：

  const handleSubmit = async e => {
    e.preventDefault()
    setIsLoading(true)
    const fireToken = await localStorage.FBIdToken
    await axios
      .post(`/user`, formData, {
        headers: {
          Authorization: `${fireToken}`
        }
      })

      .then(res => {
        setMessage(res.data)
        fetchProfile()
        setIsLoading(false)
      })
      .catch(err => {
        setErrors(err.response.data)
        console.log(err)
        setIsLoading(false)
      })
  }

我将消息设置为状态，然后在返回中使用它，如下所示：

           <Typography variant="body2" className={classes.customError}>
                  {message.message}
                </Typography>

不确定如何设置超时时间，任何建议将不胜感激！谢谢

Answer 1

您没有共享整个代码，但是我想您可以在setMessage方法中设置超时，该方法将在几秒钟后更新状态：

setMessage(message)
{
    clearTimeout(this.messageClearTimeout);

    this.setState({message});

    this.messageClearTimeout = setTimeout(
        () => this.setState({message: null}),
        5000
    );
}

Answer 2

您可以像这样使用setTimeout

let _TIMER;
export function SomeComponent() {
...
  axios.post
  ...
  .then(res => {
    setMessage(res.data);
    fetchProfile();
    setIsLoading(false);
    clearTimeout(_TIMER);
    _TIMER = setTimeout(() => {
      setMessage();
      clearTimeout(_TIMER);
    }, 5000);
  });
  ....
  {message.message && <Typography variant ...

几秒钟后如何使消息消失

2 个答案: