Как очистить поля после обратного вызова от axios?

Question

У меня есть модальный компонент с формой.Я хочу сообщить в поля этой формы, что данные формы были успешно отправлены в базу данных, и очистить ее поля.

Код компонента:

//ItemModal.js

addItem(e) {
    e.preventDefault();
    const item = {
      id: this.props.itemsStore.length + 1,
      image: this.fileInput.files[0] || 'http://via.placeholder.com/350x150',
      tags: this.tagInput.value,
      place: this.placeInput.value,
      details: this.detailsInput.value
    }
    console.log('addded', item);
    this.props.onAddItem(item);
    this.fileInput.value = '';
    this.tagInput.value = '';
    this.placeInput.value = '';
    this.detailsInput.value = '';
    this.setState({
      filled: { 
        ...this.state.filled, 
        place: false, 
        tags: false 
      },
      loadingText: 'Loading...'
    });
  }

...

render() {
    return (
            <div className="text-center" > 
            <div className={"text-center form-notification " + ((this.state.loadingText) ? 'form-notification__active' : '' )}>
              {(this.state.loadingText) ? ((this.props.loadingState === true) ? 'Item added' : this.state.loadingText) : '' }
            </div>
    )
}

action.js

export function onAddItem(item) {
          axios.post('http://localhost:3001/api/items/', item )
            .then(res => {
              dispatch({type:"ADD_ITEM", item});
              dispatch({type:"ITEM_LOADED", status: true});
            })
}

helper.js

else if (action.type === 'ITEM_LOADED') {
    const status = action.status;
    return {
      ...state,
      isItemLoaded: status
    }
  } 

В настоящее время у меня есть несколько проблем с моим кодом: 1. поле очищается сразу после нажатия, но оно должно очищаться после изменения состоянияloadingState.Я попытался проверить в отдельной функции on в componentWillReceiveProps, изменилось ли состояние, и это сработало, но я сталкиваюсь с другой проблемой, что после закрытия этого модального режима были ошибки, что такие поля не существуют.2. loadingText должно стать '' (пустым) через несколько секунд.Пробовал тот же подход с отдельной функцией и componentWillReceiveProps, что и в первом выпуске.

Answer 1

Один из немногих способов добиться этого - использовать асинхронное ожидание, которое разрешит обещания, а затем вернет значение, после чего вы можете очистить значения

1-й подход с использованием асинхронного ожидания

---

Вот пример

handleSubmit = async event => {
  event.preventDefault();

  // Promise is resolved and value is inside of the response const.
  const response = await API.delete(`users/${this.state.id}`);
  //dispatch your reducers
};

Теперь в вашем реагирующем компоненте назовите его

PostData() {
        const res = await handleSubmit();
        //empty your model and values
    }

Второй подход заключается в использовании таймера для проверки значенияизменяется или нет

---

для этого нам нужна одна переменная, добавляющая это к службе

let timerFinished=false;

одна функция, чтобы проверить, изменена она или нет

CheckTimers = () => {
    setTimeout(() => {
        if (timerFinished) {
            //empty your modal and clear the values
        } else {
            this.CheckTimers();
        }
    }, 200);
}

в добавляемом элементе измените значение этой переменной

export function onAddItem(item) {
    axios.post('http://localhost:3001/api/items/', item)
        .then(res => {
            timerFinished = true;
            dispatch({
                type: "ADD_ITEM",
                item
            });
            dispatch({
                type: "ITEM_LOADED",
                status: true
            });
        })
} 

, и вот как мы должны его назвать.

PostData = (items) => {
    timerFinished = false;
    onAddItem(items);
    this.CheckTimers();    
}

Если вы проверите это, мы постоянно проверяем изменение переменнойи опустошается только после того, как все сделано.

Одна вещь, которую вам нужно обработать, это то, что когда axios не удалось опубликовать данные, вам нужно изменить значение переменной на что-то и обработать его, вы можете сделать это, используя разные значения 'error','failed','success' до timerFinished переменнаяе.

Answer 2

В конструкторе сохраните копию вашего начального состояния в const следующим образом:

const stateCopy = Object.create(this.state);

Когда ваш запрос ajax завершится, в обратном вызове sucess вы можете сбросить состояние с этой копией следующим образом:

this.setStae({
...stateCopy
});