react-redux的调度无法在表单处理函数中正确调用

Question

我正在使用第三方api构建加密货币交换应用。我的问题来自store.dispatch()组件的调用ConvertForm。虽然，我仍然会使用connect()，但我想先测试处理生命周期的表格。每当我单击带有handleCryptoSubmit()事件句柄的提交按钮时，store.dispatch()应该调用fetchCryptoToCurrencyBegin()（仅用于发短信），该功能应该将reduce的状态的loading属性更改为TRUE。在提交表单时，在验证输入后，fetchCryptoToCurrencyBegin()不会将load属性更改为True，直到我再次更改cryptoCode表单字段或currencyCode表单字段的值。更改后，无需单击提交，它将自动调用fetchCryptoToCurrencyBegin()。

如果我在表单处理功能以及reduce和action代码中有任何错误，请检查onChangeHandle()。一切似乎都正常。尽管我是新来的反应者，但我在互联网上搜索可能的答案，但没有成功。我已经使用setState()来获取api数据，它在第一次尝试时就可以使用。我不认为通过mapdispatch将组件连接到redux也不起作用。我的问题是react-redux

///this is my inner state for form validation
 this.state={
   cryptoToCurrencyState:{
                quantityAmount: {
                    figureAmount: null,
                    amountErrorMessage: '',
                    validInput: true,
                    validForSubmit: false
                },

                cryptoCode: { 
                    tokenCode: '',
                },
                currencyCode: {
                    nationalCode: '',

                }
              },
}

/// this is my form field change handler.

 // for reusing the targetProperty logic
    targetPropertyUtility = (target) => {
        let objectTarget;
        if (target.name === 'quantityAmount'){
            return objectTarget = 'figureAmount';
        }else if (target.name === 'cryptoCode'){
            return objectTarget = 'tokenCode';
        }
        return objectTarget = 'nationalCode';

    }; 

 handleCryptoChange = (e) => { 
          const regexp = new RegExp(`^-?[0-9]*$`);
          const target = e.target;
          e.persist();
          // check above arror function to understand targetPropertyUtility
          let targetProperty = this.targetPropertyUtility(target)
          if (target.name === 'quantityAmount' && !regexp.test(target.value)){
            this.setState({
                ...this.state,
                cryptoToCurrencyState:{
                    ...this.state.cryptoToCurrencyState,
                    [target.name]: {
                        ...this.state.cryptoToCurrencyState[target.name],
                        [targetProperty] : target.value,
                        amountErrorMessage: 'input only valid number',
                        validInput: false,
                        validForSubmit: false
                        } 
                }
                });
        }else if(target.name === 'quantityAmount' && regexp.test(target.value)){
            this.setState({
                ...this.state,
                cryptoToCurrencyState:{
                    ...this.state.cryptoToCurrencyState,
                    [target.name]: {
                        ...this.state.cryptoToCurrencyState[target.name],
                        [targetProperty] : target.value,
                        amountErrorMessage: null,
                        validInput: true,
                        validForSubmit: true

                        } 
                }
                });
        }else{
            this.setState({
                ...this.state,
                cryptoToCurrencyState:{
                    ...this.state.cryptoToCurrencyState,
                    [target.name]: {
                        ...this.state.cryptoToCurrencyState[target.name],
                        [targetProperty] : target.value,
                    }
                },

            });

        }

    };

///this is my onSubmit hander

// this event handle the submit of cryptocurrency to national currency

     handleCryptoSubmit = (e) => {
         e.preventDefault();
         const {cryptoToCurrencyState} = this.state;
         const {quantityAmount}= cryptoToCurrencyState;

         lauch action thunk if the form is valid
         /// if form is not valid, validation error will be displayed and the action thunk will be prevented
         /// There will be main error display to show the form is not valid

        if(quantityAmount.validForSubmit){
          /// action for testing
            store.dispatch(fetchCryptoToCurrencyBegin());

        }else if(!quantityAmount.figureAmount){
            this.setState({
                ...this.state,
                cryptoToCurrencyState:{
                    ...this.state.cryptoToCurrencyState,
                    quantityAmount: {
                        ...this.state.cryptoToCurrencyState.quantityAmount,
                        amountErrorMessage: 'The field is required',
                        validInput: false,
                        validForSubmit: false
                        },

                }
                });
            }

我希望store.dispatch()在表单字段的验证中触发fetchCryptoToCurrencyBegin()。谢谢。

Answer 1

我能够通过在组件上使用connect解决问题。因此，如果组件未连接到react-redux的HOC连接/提供者，则store.dispatch（）将无法在该组件中有效地工作。