Я создаю приложение обмена криптовалютой с помощью стороннего API. Моя проблема возникает из-за вызова store.dispatch() из компонента ConvertForm. Хотя я все еще буду использовать connect(), но сначала я хочу протестировать форму, передающую жизненный цикл. В любое время, когда я нажимаю кнопку подтверждения с дескриптором события handleCryptoSubmit(), store.dispatch() должен вызывать fetchCryptoToCurrencyBegin() (используется только для текстовых сообщений), функция должна изменить свойство загрузки состояния Reduce на TRUE. При отправке формы, после проверки входных данных, fetchCryptoToCurrencyBegin() не изменяет свойство загрузки на True, пока я не изменю либо значение поля формы cryptoCode, либо поле формы currencyCode снова. И он автоматически вызовет fetchCryptoToCurrencyBegin() без нажатия кнопки «Отправить» после изменения.
Я должен проверить свой onChangeHandle(), если я сделаю какую-либо ошибку в функции обработки формы и кодах уменьшения и действия. Кажется, все работает нормально. Хотя я новичок, чтобы реагировать, у меня есть поиск в Интернете возможных ответов без какого-либо успеха. Я использовал setState() для получения данных API, он работает с первой попытки. Я не думаю, что подключение компонента к редуксу через mapdispatch также будет работать. Моя проблема - response-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() при проверке в поле формы. Спасибо.