React中useEffect提交Google reCAPTCHA Token为空的解决求助

问题原因 #

你试图通过DOM操作给react-hook-form管理的字段赋值，这和react-hook-form的受控表单逻辑冲突；同时使用defaultValue无法自动同步token的状态更新，导致提交时token字段为空。

解决方案 #

不需要额外的隐藏表单字段存储token，直接在提交请求时将token合并到表单数据中即可，具体修改如下：

1. 移除冗余代码：删除contact_tokenVal文本域、对应的useEffect DOM操作代码
2. 修改提交逻辑：在onSubmit函数中，将token合并到要发送的表单数据里

修改后的完整代码 #

import { useForm } from 'react-hook-form';
import { useHistory } from 'react-router-dom';
import React, { useState } from 'react';
import axios from 'axios';
import swal from 'sweetalert';
import ReCAPTCHA from "react-google-recaptcha";

const ContactForm = (props) => {
    const { submitBtnClass } = props;
    const { register, handleSubmit } = useForm();
    const [token, setToken] = useState();
    const history = useHistory();
    const recaptchaRef = React.useRef();

    function onChange(value) {
        console.log("Captcha value:", value);
        setToken(value);
    }

    const onSubmit = data_api => {
        // 将token合并到表单数据中
        const submitData = {
            ...data_api,
            contact_tokenVal: token
        };
        
        axios
            .post('http://localhost/erlanggastudio-rest-api/contact.php', submitData)
            .then(res=>{
               console.log(submitData);
               history.push('/onepage-3');
               swal(res.data.title, res.data.text, res.data.icon);
            })
            .catch(err => {
                console.log(err);
            });
    };


    return (
        <form id="contact-form" onSubmit={handleSubmit(onSubmit)}>
            <div className="row">
                <div className="col-md-6 mb-30">
                    <input className="from-control" type="text" id="contact_name" name="contact_name" placeholder="Nama" {...register('contact_name')} required />
                </div>

                <div className="col-md-6 mb-30">
                    <input className="from-control" type="text" id="contact_email" name="contact_email" placeholder="E-Mail" {...register('contact_email')} required />
                </div>

                <div className="col-md-6 mb-30">
                    <input className="from-control" type="text" id="contact_mobilephone" name="contact_mobilephone" placeholder="No Telepon" {...register('contact_mobilephone')} required/>
                </div>

                <div className="col-md-6 mb-30">
                    <input className="from-control" type="text" id="contact_website" name="contact_website"  placeholder="Website Anda" {...register('contact_website')} />
                </div>

                <div className="col-12 mb-30">
                    <textarea className="from-control" id="contact_message" name="contact_message" placeholder="Isi Pesan" {...register('contact_message')} required ></textarea>
                </div>

                <div className="col-12 mb-30">
                    <input className="from-control" type="hidden" id="contact_serverKey" name="contact_serverKey"  value="6Lea50IhAAAAAAtfj-sElz7biY8WlDgrNwy7M7Tx" {...register('contact_serverKey')} />
                    <input className="from-control" type="hidden" id="contact_siteKey" name="contact_siteKey"  value="6Lea50IhAAAAAEgdIvB6xUJ8KJCUyO-xKpPnA0fO" {...register('contact_siteKey')} />
                </div>

                <div className="col-md-6 mb-30">
                <ReCAPTCHA
                    ref={recaptchaRef}
                    sitekey="6Lea50IhAAAAAEgdIvB6xUJ8KJCUyO-xKpPnA0fO"
                    onChange={onChange}
                />
                </div>
            </div>
            <div className="btn-part">
                <button className={submitBtnClass ? submitBtnClass : 'readon learn-more submit'} type="submit">Kirim</button>
            </div>
        </form>
    );
}

export default ContactForm;

额外说明 #

如果希望通过react-hook-form的表单状态来管理token，也可以使用setValue方法：

1. 引入setValue：const { register, handleSubmit, setValue } = useForm();
2. 在onChange函数中调用：setValue('contact_tokenVal', value);
3. 此时可以保留一个隐藏字段：<input type="hidden" {...register('contact_tokenVal')} />，提交时react-hook-form会自动包含这个字段的值

这种方式更符合react-hook-form的使用习惯，但直接合并数据的方式更简洁。

内容的提问来源于stack exchange，提问作者Erlangga