Question

我的设置是我有2个主要组件，我有NewForm和MainPage。当用户转到NewForm时，它将卸载MainPage，反之亦然

NewForm已连接到Web API，因此，当用户提交时，NewForm将数据发送到Web API，并返回成功响应并重定向回主页。

尽管MainPage有一个表，该表还显示了来自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);
})}
};

如何进行一次动作调用，然后再进行另一个动作调用

1 个答案: