谁能帮我在这个 React JS 组件中隐藏 setTimeout id？

Question

I'm trying to do what I thought would be a simple task. On submit of the form that is pulled in by the GravityForm component, I set the handleSubmit state to true which then renders the thank you message (this all works fine, please forgive the fact that I've removed the urls but I can assure you this bit is fine).

My issue comes when I load the success message. The setTimeout function displays the id. Is there a way I can either stop it displaying that id or implement this function in a different way that means it won't show?

The expected functionality is that the thank you message will display for 3 seconds and then the page will load to a different site.

Thank you

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

Can you please try this way, Create a function which you can set your success things and call it on your else condition

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

And Just call this function into your else condtion

 else {
        return (
            this.renderSuccessMessage()
        )
        
    }

Answer 2

The reason you're seeing the id is because the setTimeout function returns the id. Imagine the setTimeout() call simply being replaced with 123, so that it would look like { 123 }, it will of course show the 123 value.

A way you can suppress the value is by converting it into an expression to be evaluated - something like { 123 && <></> }, that way the empty element will be returned instead of the value itself (obviously replacing the 123 with your setTimeout() function as follows:

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

You could also play around with { 123 && undefined } or { 123 && null }, which would likely result in not even returning an element at all, again ensuring to replace 123 with your setTimeout() function.

Answer 3

You can change your onSubmitSuccess function like below one and remove setTimeout from else block :

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

Answer 4

You can write it to the console or use an empty auxiliary function.

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