异步操作创建者在调用可触摸不透明度的 onPress 时未正确等待

Question

我遇到了一个问题，我似乎找不到我所犯的错误。我基本上有一个简单的 redux-thunk 动作创建器，其中包含一些 axios 调用。我使用connect将我的组件连接到这个动作创建器，然后在传递给TouchablyOpacityonPress 道具的异步方法中调用它。

简化代码：

动作创建者：

export const createUploadEntry = (
step,
image,
base64,
width,
height,
submissionEntry
) => async (dispatch, getState) => {
dispatch(createUploadEntryStart());
try {
const response = await axios.put(...);
console.log("finished creating submission entry");
dispatch(createUploadEntrySuccess(response.data));
} catch (error) {
...
}
}

索引.js

import { connect } from "react-redux";
import Component from "./component";
import { createUploadEntry } from "../../../../store/actions/trainings";
export default connect(
null,
{ createUploadEntry }
)(Component);

组件.js

const Test = (props) => {
const onPressed = async () => {
console.log("start awaiting");
await props.createUploadEntry(...);
console.log("finished awaiting");
props.navigateToNext();  
}
return <TouchableOpacity onPress={onPressed}>...</TouchableOpacity>
}

然后我在控制台中得到的输出是：

• 开始等待
• 完成等待
• 已完成提交条目的创建

动作创建者涉及上传图像，因此需要一些时间，并且在"开始等待"之后立即调用">

完成等待"。我希望我已经很好地描述了我的问题，并提前感谢任何帮助！

干杯

Answer 1

看看

export const createUploadEntry = (
step,
image,
base64,
width,
height,
submissionEntry
) => async (dispatch, getState) => {
dispatch(createUploadEntryStart());
try {
const response = await axios.put(...);
console.log("finished creating submission entry");
dispatch(createUploadEntrySuccess(response.data));
return response;
} catch (error) {
...
}
}

试试这个return response;

Answer 2

发现是另一个中间件搞砸了 redux-thunk。