React Axios调用返回整个函数[重复]答案

【问题标题】：React Axios Call Return Whole Function [duplicate]React Axios调用返回整个函数[重复]
【发布时间】：2019-10-19 10:05:57
【问题描述】：

我有下面的 Axios 调用

 getDetail = () => {
    this.apiGetDetail
      .callApi(description)
      .then(data => {
          return(data.data);
      })
      .catch(error => {
        console.log("Failed");
      });
  };

当我从 getDetail 函数获取返回值时，它每次都未定义。我试图创建一个变量使值等于数据并返回它，但这也不起作用。似乎总是getDetail 在apiGetDetail API 调用之前完成并且什么都不返回。我尝试发送返回到 Redux 存储或本地状态的数据，但对于我设置的 React Table 也不起作用。

我有下面的反应表子组件

        SubComponent={row => {
            let myDetail = this.getDetail(
              row.original.cusip,
              row.original.description,
              detailColumns
            );
             return (
              <ReactTable
                data={Array.from(myDetail)}
                columns={detailColumns}
                style={{ height: "400px" }}
                minRows="5"
                noDataText="No Data"
              />
            );
          }}

但无法显示，因为数据返回为空。

如何确保在 getDetail 函数中等待返回 apiGetDetail 调用然后返回来自该调用的数据值？？

编辑：我确信这可以使用 async await 来完成，但我不知道如何将其应用于此设置。我以前从未做过异步等待......

【问题讨论】：

@SterlingArcher 这么简单的答案哈！？将其标记为具有 10 页长答案的问题的重复项。我知道可以通过 async-await 来做到这一点。我不知道如何实现这一点。如果您这样做，请提供一个答案，以便轻松标记重复内容！
关于副本的信息是您在互联网上找到的有关异步行为的一些最佳知识，不要因为您认为它太长而急于抹黑它。跨度>
@SterlingArcher 而不是将其标记为重复移动，您可以做 Mauricio Carlezzo 所做的事情，尝试针对此案例提供帮助并获得声誉帮助某人。我该怎么做呢？选项1：阅读这一长页，选项2：这样做这个那个。哪个选项有用？

标签： reactjs datatable axios

【解决方案1】：

首先我认为你的函数 getDetail 返回未定义，你应该把，

**return** this.apiGetDetail

但是在这种情况下，这会返回一个promise，我认为这不是最好的方法，所以这里let myDetail = this.getDetail(你需要等待promise返回，我认为render方法内部不好！您可以阅读有关 async 和 await 的更多信息！

但是，我认为如果你 setState 直接返回一个值会更好，例如，如果你有return(data.data);，你应该使用this.setState({ myDetail });。然后在渲染方法中你可以访问像this.state.myDetail

这样的值

【讨论】：