誰能幫我在這個 React JS 組件中隱藏 setTimeout id？

Question

我正在嘗試做我認為是一項簡單的任務。 在提交由 GravityForm 組件拉入的表單時，我將 handleSubmit 狀態設置為 true，然后呈現感謝消息（這一切正常，請原諒我已經刪除了網址，但我可以向您保證這一點很好）。

當我加載成功消息時，我的問題就出現了。 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

你能試試這種方式嗎，創建一個函數，你可以設置成功的東西並在你的其他條件下調用它

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 2

您看到 id 的原因是 setTimeout 函數返回了 id。 想象一下 setTimeout() 調用只是被 123 替換，因此它看起來像 { 123 }，它當然會顯示 123 值。

您可以抑制該值的一種方法是將其轉換為要評估的表達式 - 類似於 { 123 && <></> }，這樣將返回空元素而不是值本身（顯然，將 123 替換為您的setTimeout() 函數如下：

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

您還可以使用 { 123 && undefined } 或 { 123 && null }，這可能會導致根本不返回元素，再次確保用 setTimeout() 函數替換 123。

Answer 3

您可以更改您的 onSubmitSuccess 函數，如下所示，並從 else 塊中刪除 setTimeout ：

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

Answer 4

您可以將其寫入控制台或使用空的輔助功能。

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