反应本机等待在按下功能中不起作用

Question

我有一个使用 redux 的异步函数，它调用 API 并从服务器返回响应：

function xyz() {
  return async (dispatch, getState) => {
    const { user: { token } } = getState();
    return axios.get(API_URL, {
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        'jwt': token
      }
    })
      .then(response => {
        console.log(response.data.data);
        return response.data.data;
      })
      .catch(function(error) {
        console.log('error: ' + error.message);
      });
  };
}

mapDispatchToProps 函数定义如下：

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    xyz: () => {
      dispatch(actions.xyz());
    }
  };
};
export default connect(null, mapDispatchToProps)(Container);

我正在尝试从以下函数调用函数 xyz：

  abc = async () => {
    const { xyz } = this.props;
    const result = await xyz();
    console.log(result);
  }

当按下按钮时触发：

<TouchableOpacity onPressOut={this.abc}>

我看到函数 abc 中的 console.log 打印未定义，而 xyz 中的 console.log(result.data.data) 打印预期结果。我哪里错了？

解决方案

错误出现在 mapDispatchToProps 函数中，该函数缺少返回值。这是正确的实现：

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    xyz: () => {
      return dispatch(actions.xyz());
    }
  };
};
export default connect(null, mapDispatchToProps)(Container);

Answer 1

就像我在 cmets 中提到的， xyz() 应该返回一个承诺。仔细检查 dispatch 和 getState 参数是否正确传递。您还需要await 返回的 axios.get 承诺。例如：

abc = async () => {
  const { xyz } = this.props;
  const result = await xyz();
  const results = await result(); 
  console.log(results);
}

这是一个snack 的工作示例。

Answer 2

当您说 xyz 中的 console.log 打印预期结果时，我不完全理解您的意思，您是在谈论 catch 中的 error.message 吗？此外，您可能收到undefined 的原因是因为function xyz 不是 Async 而是返回一个异步函数，因此您应该使 xyz async 例如：

function async xyz () {
 // Rest of code
}

更多内容可以阅读here