谁能帮我在这个 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)) }