Uncaught (в обещании) Ошибка при диспетчеризации после загрузки значения recaptcha - PullRequest
0 голосов
/ 23 мая 2019

У меня есть страница "Свяжитесь с нами" в моем проекте activjs, и я использую избыточность и хранилище для управления состояниями в своей форме. Я добавляю компонентact-google-recaptcha. Я зарегистрировался в Google Recaptcha и все в порядке. в свойстве onChange компонента recaptcha я хочу отправить действие setCaptcha, чтобы установить состояние капчи в моем редуксе. Я использую базовую форму, и когда я вызываю действие set captcha, я получаю ошибку «Uncaught (in обещание)»!

мой контактUsFormComponent:

import React, {Component} from 'react';
import './ContactUs.css';
import ReCAPTCHA from "react-google-recaptcha";
import {
    setCapcha,
} from "../../../redux/actions";
import {connect} from "react-redux";
import $ from "jquery";

class ContactUsForm extends Component {

    constructor() {
        super();

        this.handleSubmit = this.handleSubmit.bind(this);

    }



    handleSubmit(event) {
        this.props.validateCapcha();
        this.props.submitContactUs();
    }

    render() {
        const recaptchaRef = React.createRef();


        function onChange(value) {
            if (value.length > 0)
                this.props.setContactCapcha(value);
        }

        window.recaptchaOptions = {
            lang: 'fa',
        };


        return (

            <>


                    <form onSubmit={this.handleSubmit}>
                   .
                   .
                   .

                        <div className="row">
                            <div className="col-md-3 ">
                                <div className="rc-imageselect">
                                    <ReCAPTCHA
                                        ref={recaptchaRef}
                                        size="normal"
                                        sitekey="my site key here"
                                        onChange={onChange}
                                    />
                                </div>

                            </div>
                            <div className="col-md-3 text-left">
                                <button style={{backgroundColor: "#4870f5"}} type="submit"
                                        className="btn btn-primary register-btn font-13">submit
                                </button>
                            </div>

                        </div>


                    </form>

                </div>
            </>
        )
    }
}

function mapDispatchToProps(dispatch) {
    return {
   .
   .
   .
        setContactCapcha: capcha => dispatch(setCapcha(capcha)),


    };
}

const mapStateToPtops = (state) => {
    return {
        contactUsState: state.contactUsState
    }
};

export default connect(mapStateToPtops, mapDispatchToProps)(ContactUsForm);

мой код редуктора:

.
.
.
export const contactUsReducer = (state = contactUsInitialState, action) => {

    switch (action.type) {
        .
        .
        .

        case ACTION_SET_CAPCHA:
            console.log("Captcha valueeeeeeeeeeeeee:", action.capcha);
            return {...state, capcha: action.capcha};
        .
        .
        .

        default:
            return state;
    }
};

код моих действий:

.
.
.
export function setCapcha(capcha) {
    return {
        type: ACTION_SET_CAPCHA,
        capcha:capcha
    };
}
.
.
.
...