如何在此 React JS 组件中隐藏 setTimeout id？

Question

我正在尝试做我认为会很简单的任务。在提交由 GravityForm 组件拉入的表单时，我将 handleSubmit 状态设置为 true，然后呈现感谢消息（这一切正常，我已经删除了 URL，但我可以向你保证这一点没问题） .

加载成功消息时出现问题。 setTimeout 函数显示 id。有什么方法可以阻止它显示该 ID 或以不同的方式实现此功能，这意味着它不会显示？

预期的功能是致谢消息将显示 3 秒，然后页面将加载到其他站点。

import "./form.css";
import React, { Component } from "react";
import GravityForm from "react-gravity-form";
import styled from "styled-components";

export class  Gravity extends Component {

    state = {
        handleSubmit : false,
    }

    successMessage = styled.div`
        display: block;
        color: #fff;
        font-size: 24px;
        text-align: center;
    `;

    render() {
        const { handleSubmit } = this.state;

        if (!handleSubmit) {
            return (
                <GravityForm
                    backendUrl="https://removedurlforclientprivacy.com/wp-json/glamrock/v1/gf/forms"
                    formID="3"
                    onSubmitSuccess={ () => {
                        this.setState({
                            handleSubmit : true,
                        })
                    } }
                    
                />
            );
        } else {
            return (
                <>
                    <this.successMessage>
                        <p>Thanks for entering our competition!<br />If you're our lucky winner, we will let you know.</p>
                    </this.successMessage>
                    { setTimeout(() => window.location.href = 'https://google.co.uk', 3000) }
                </>
            )
            
        }

    }
}

export default Gravity

Answer 1

您可以像下面那样更改您的 onSubmitSuccess 函数，并从 else 块中删除 setTimeout ：

onSubmitSuccess={() => {
                    this.setState({
                        handleSubmit : true,
                    },() => {
                      setTimeout(() => window.location.href = 'https://google.co.uk', 3000)
                    });
                }}

Answer 2

您可以将其写入控制台或使用空辅助函数。


function do_nothing () {}


{ console.info(setTimeout(() => window.location.href = 'https://google.co.uk', 3000)) }
{ do_nothing(setTimeout(() => window.location.href = 'https://google.co.uk', 3000)) }

Answer 3

你能不能试试这个方法，创建一个函数，你可以设置你的成功事件并在你的其他条件下调用它

renderSuccesssMessage = () => {
  setTimeout(() => window.location.href = 'https://google.co.uk', 3000)
  return (
    <this.successMessage>
    <p>Thanks for entering our competition!<br />If you're our lucky winner, we will let you know.</p>
</this.successMessage>
  )
}

并且只需将此函数调用到您的其他条件中

 else {
        return (
            this.renderSuccessMessage()
        )
        
    }

Answer 4

您看到 ID 的原因是因为 setTimeout 函数 returns ID。想象一下 setTimeout() 调用只是被替换为 123，因此它看起来像 { 123 }，它当然会显示 123 值。

一种可以抑制该值的方法是将其转换为要计算的表达式 - 类似于 { 123 && <> }，这样将返回空元素而不是值本身（显然将 123 替换为您的 setTimeout() 函数，如下所示：

{ setTimeout(() => window.location.href = 'https://google.co.uk', 3000) && <></> }

您还可以使用 { 123 && undefined } 或 { 123 && null }，这可能会导致根本不返回元素，再次确保用您的 setTimeout() 函数替换 123。

如何在此 React JS 组件中隐藏 setTimeout id？

How to hide the setTimeout id in this React JS component?

javascript

settimeout

reactjs