无法将promise中的数据返回到react中的其他组件

Question

我有一个在服务器上发布数据的api，我想在其他文件中获得该响应。这是action.js文件中的一个函数。我想将这个承诺的响应返回到调用它的其他组件。

export const saveOrder = data => dispatch => {
fetch(`${baseUrl}/save-order`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data',
},
body: data,
})
.then(res => res.json())
.then(json => {
console.log('json1', json);
**want to return this json variable**
alert('order placed');
})
.catch(error => {
console.log('error in saving', error);
});
};

这是我的组件，我希望在成功下订单时得到它的响应。我尝试过异步和等待，但没有成功。

const postOrder = () => {
var data = new FormData();
data.append('userId', state.user.id);
dispatch(saveOrder(data));
};

Answer 1

看起来您正在使用redux进行状态管理。但是，您并没有使用dispatch函数来存储saveOrder中接收到的数据。实际上，您的dispatch所做的只是调用必要的thunk，并且已经在其中了，您必须使用将数据存储在存储中的操作来调用dispatch。然后直接在组件本身中使用选择器，您可以在数据可用时从存储中获取数据。通常，您使用redux-thunk只是为了运行api请求，而不是遵循必要的概念。您可以在此处查看使用模型：https://redux.js.org/tutorials/essentials/part-5-async-logic

Answer 2

是否尝试将Dispatch函数作为参数传递？

以防你的Redux Saga出现问题？

我创建这个函数的方式会有点不同，将角色分开。

const saveOrder = data => {
return fetch(`${baseUrl}/save-order`, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data',
},
body: data,
})
.then(res => res.json())
.then(json => {
return "Success"
})
.catch(error => {
return "Error"
});
};


saveOrder("any data")
.then(result => console.log(result))
.catch(error => console.log(error.message))

/*Instead of console.log you can place your dispatcher*/