在 TouchableOpacity 的 onPress 中调用时未正确等待 Async Action-Creator

Question

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

简化代码：

动作创建者：

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) {
        ...
    }
}

Index.js

import { connect } from "react-redux";

import Component from "./component";
import { createUploadEntry } from "../../../../store/actions/trainings";

export default connect(
    null,
    { createUploadEntry }
)(Component);

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>
}

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

开始等待
等待完毕
已创建提交条目

action creator涉及上传图片，所以需要一点时间，"finished awaiting"在"start awaiting"之后调用。

我希望我已经充分描述了我的问题，在此先感谢您的帮助！

干杯

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。

在 TouchableOpacity 的 onPress 中调用时未正确等待 Async Action-Creator

Async Action-Creator not properly awaited when calling in TouchableOpacity's onPress

react-native

redux

redux-thunk

react-redux