Как заставить Action Action подождать перед тем, как продолжить действие

Question

У меня есть 2 основных компонента, у меня есть NewForm и MainPage. Когда пользователь переходит на NewForm, он отключает MainPage и наоборот

NewForm подключается к веб-API, поэтому при отправке пользователь отправляет данные в веб-API и возвращает ответ об успешном завершении работы. перенаправляет обратно на главную страницу.

Хотя на главной странице есть таблица, отображающая все данные, также поступающие из WebAPI. Пока что я сделал так, чтобы вызывать Web API каждый раз, когда он монтируется.

Моя текущая дилемма состоит в том, что после того, как пользователь отправляет форму, он не будет отображать вновь созданные данные, потому что он все еще обрабатывал их, когда он перенаправлялся на MainPage и получал свои данные из WebAPI.

Итак, по моим исследованиям лучший метод, который я получил, - это использовать Promise:

    newForm() {
    this.props.newDataForm(this.formdata).then(()=>{ 
        this.props.changePage("MainPage");
    }); 
}

Но когда я пытаюсь запустить его, я получаю:

TypeError: this.props.newDataForm(...).then is not a function

Мое действие выглядит так:

export const newDataForm = (postData) => dispatch => {
return () => {fetch('http://localhost:81/api/value', {
method: 'POST', 
headers: {
'content-type': 'application/json'
},
body: JSON.stringify(postData)}).then(function (data) {
  console.log('Request succeeded with JSON response', data);          
  dispatch({
    type: types.NEW_FORM,
    payload: data
})
}).catch(function (error) {
  console.log('Request failed', error);
})}

};

Answer 1

Вам необходимо вернуть fetch

export const newDataForm = (postData) => dispatch => {
return () => fetch('http://localhost:81/api/value', {
method: 'POST', 
headers: {
'content-type': 'application/json'
},
body: JSON.stringify(postData)}).then(function (data) {
  console.log('Request succeeded with JSON response', data);          
  dispatch({
    type: types.NEW_FORM,
    payload: data
})
}).catch(function (error) {
  console.log('Request failed', error);
})}
};