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

就像我在评论中提到的那样，xyz（）应该返回一个promise。仔细检查dispatch和getState参数是否正确传递。您还需要await返回的axios.get promise。例如：

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

这是一个snack，带有有效的示例。

Answer 2

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

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

有关更多信息，您可以阅读here

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

解决方案

2 个答案: