在 TouchableOpacity 的 onPress 中调用时未正确等待异步 Action-Creator答案

【问题标题】：Async Action-Creator not properly awaited when calling in TouchableOpacity's onPress在 TouchableOpacity 的 onPress 中调用时未正确等待异步 Action-Creator
【发布时间】：2020-01-16 11:33:16
【问题描述】：

我遇到了一个问题，我似乎找不到我犯的错误。我基本上有一个简单的 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>
}

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

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

动作创建者涉及上传图片，因此需要一些时间，并且在“开始等待”之后立即调用“完成等待”。

我希望我已经足够好地描述了我的问题，并提前感谢您的帮助！

干杯

【问题讨论】：

createUploadEntry 在这里不是异步的，它返回一个异步函数。发送createUploadEntrySuccess 后尝试返回resp。
@Clarity 不能解决问题。
你试过TouchableHighlight而不是TouchableOpacity吗？我知道这似乎无关，但TouchableOpacity 有一些非常讨厌的错误，只能在非常特定的环境下复制，您的可能会受到它的影响。
@CanPoyrazoğlu 还没有想到这一点，我会尝试一下，然后再找你！感谢您的意见！
@CanPoyrazoğlu 不幸的是似乎没有什么不同

标签： react-native redux react-redux redux-thunk

【解决方案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;

【讨论】：

一次尝试使用操作响应的 return 语句
这个建议已经在 cmets 中讨论过了，在我看来，如果函数没有返回任何会导致 Promise 或返回的东西会导致一个 Promise，它仍然是一个 Promise。所以这并不能解决我的问题。

【解决方案2】：

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

【讨论】：

我想知道为什么有人对一个合理的问题投反对票并（尽管这只是一个愚蠢的错误）回答。