Javascript 一页上有react-recaptcha-v3的两个表单

在我的页面上，我有两个与

formspree

相关的表单，分别在gatsby和react中构建。我对这两个表单都使用，但它只对第一个表单有效（

this.state.isVerified

在第二个表单中始终为false）。是否无法在一个页面上对多个表单使用recaptcha v3，或者我的代码有问题？这是我代码的相关部分

第一种形式的构件（工程）：

componentDidMount（）{
loadReCaptcha（“我的站点密钥”）；
}    
重述{
console.log（“已加载Recaptcha”）；
}
验证回调（res）{
如果（res）{
这是我的国家({
已验证：正确
});
}
}
handleSubmit（e）{
e、 预防默认值（）；
如果（（this.state.isVerified）&&（this.state.formError==“”）{
常数形式=e.目标；
常数数据={
伊米：this.state.name，
纳兹维斯科：这个。州。姓，
电话号码：这个.state.phoneNumber，
电子邮件：this.state.email，
wiadomosc:this.state.msg
};
const xhr=new XMLHttpRequest（）；
xhr.open（form.method，form.action）；
setRequestHeader（“接受”、“应用程序/json”）；
xhr.onreadystatechange=（）=>{
if（xhr.readyState！==XMLHttpRequest.DONE）返回；
如果（xhr.status==200）{
form.reset（）；
this.setState（{status:“SUCCESS”}）；
}否则{
this.setState（{status:“ERROR”}）；
}
};
send（JSON.stringify（data））；
}
这个.resetState（）；
}
render（）{
返回(
this.handleSubmit（e）}action=“my formspree链接”>
（投入）
{this.state.formError===“”？“”：{this.state.formError}
威利
本网站受reCAPTCHA和Google and apply保护

);
}

具有第二种形式的组件（不工作）：

componentDidMount（）{
loadReCaptcha（“我的站点密钥”）；
}
验证回调（res）{
如果（res）{
这是我的国家({
已验证：正确
});
}
}
重述{
console.log（“已加载Recaptcha”）；
}
handleSubmit（e）{
e、 预防默认值（）；
如果（（this.state.isVerified）和&（this.state.emailError==“”）和&（this.state.email！==“”）{
常数形式=e.目标；
console.log（form.method）；
常数数据={
电子邮件：this.state.email
};
const xhr=new XMLHttpRequest（）；
xhr.open（form.method，form.action）；
setRequestHeader（“接受”、“应用程序/json”）；
xhr.onreadystatechange=（）=>{
if（xhr.readyState！==XMLHttpRequest.DONE）返回；
如果（xhr.status==200）{
form.reset（）；
this.setState（{status:“SUCCESS”}）；
}否则{
this.setState（{status:“ERROR”}）；
}
};
send（JSON.stringify（data））；
这个.resetState（）；
}
}
render（）{
返回(
此.handleSubmit（e）}>
this.handleChange（e）}value={this.state.email}/>
波特维德
{this.state.emailError}
本网站受reCAPTCHA和Google and apply保护

)
}

您是否提供了不同的钥匙？与处理组件中的功能不同，我建议转移到reCAPTCHA组件本身，使其模块化并避免这些问题。

    componentDidMount() {
        loadReCaptcha("my-sitekey");
    }    

recaptchaLoaded() {
        console.log("Recaptcha loaded");
    }

    verifyCallback(res) {
        if(res) {
            this.setState({
                isVerified: true
            });
        }
    }

handleSubmit(e) {
            e.preventDefault();
          
            if((this.state.isVerified)&&(this.state.formError === "")) {
                const form = e.target;
                const data = {
                    imie: this.state.name,
                    nazwisko: this.state.surname,
                    telefon: this.state.phoneNumber,
                    email: this.state.email,
                    wiadomosc: this.state.msg
                };
                const xhr = new XMLHttpRequest();
                xhr.open(form.method, form.action);
                xhr.setRequestHeader("Accept", "application/json");
                xhr.onreadystatechange = () => {
                    if (xhr.readyState !== XMLHttpRequest.DONE) return;
                    if (xhr.status === 200) {
                        form.reset();
                        this.setState({ status: "SUCCESS" });
                    } else {
                        this.setState({ status: "ERROR" });
                    }
                };
                xhr.send(JSON.stringify(data));
            }
            this.resetState();
        }
    
        render() {
            return (<section className="kontakt">
                <form method="POST" onSubmit={e => this.handleSubmit(e)} action="my-formspree-link">
                    (inputs)
    
                    <div className="recaptcha">
                        <ReCaptcha
                            sitekey="my-sitekey"
                            render="implicit"
                            verifyCallback={this.verifyCallback}
                            onloadCallback={this.recaptchaLoaded}
                        />
                    </div>
    
                    { this.state.formError === "" ? "" : <div className="error">{this.state.formError}</div> }
    
                    <button type="submit">
                        Wyślij
                    </button>
    
                    <div className="google">
                        <p>This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.</p>
                    </div>
                </form>
            </section>);
        }

 componentDidMount() {
        loadReCaptcha("my-sitekey");
    }

    verifyCallback(res) {
        if(res) {
            this.setState({
                isVerified: true
            });
        }
    }

    recaptchaLoaded() {
        console.log("Recaptcha loaded");
    }

handleSubmit(e) {
        e.preventDefault();

        if((this.state.isVerified)&&(this.state.emailError === "")&&(this.state.email !== "")) {
            const form = e.target;
            console.log(form.method);
            const data = {
                email: this.state.email
            };
            const xhr = new XMLHttpRequest();
            xhr.open(form.method, form.action);
            xhr.setRequestHeader("Accept", "application/json");
            xhr.onreadystatechange = () => {
                if (xhr.readyState !== XMLHttpRequest.DONE) return;
                if (xhr.status === 200) {
                    form.reset();
                    this.setState({ status: "SUCCESS" });
                } else {
                    this.setState({ status: "ERROR" });
                }
            };
            xhr.send(JSON.stringify(data));
            this.resetState();
        }
    }

    render() {
        return (<footer>
            <div className="right">
                <form method="POST" action="formspree-link" onSubmit={e => this.handleSubmit(e)}>
                    <input type="email" name="email" placeholder="Twój email" onChange={e => this.handleChange(e)} value={this.state.email} />

                    <div className="recaptcha">
                        <ReCaptcha
                            siteKey="my-sitekey"
                            render="implicit"
                            verifyCallback={this.verifyCallback}
                            onloadCallback={this.recaptchaLoaded}
                        />
                    </div>

                    <button type="submit">Potwierdź</button>

                    <div className="error">
                        {this.state.emailError}
                    </div>

                    <div className="google">
                        <p>This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply.</p>
                    </div>
                </form>
            </div>
        </footer>)
    }