Question

我有下面的Axios电话

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

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

我在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来完成此操作，但是我不知道如何将其应用于此设置。我从来没有做过异步等待...

Answer 1

首先，我认为您的函数getDetail返回未定义，您应该放上

**return** this.apiGetDetail

但是在这种情况下，这将返回一个promise，我认为这不是最好的方法，因此在let myDetail = this.getDetail(，您将需要等待promise返回，并且我认为render方法内部的效果不好！您可以阅读有关异步并等待的更多信息！

但是，我认为最好用setState而不是直接返回一个值，例如，在有return(data.data);的地方，应该使用this.setState({ myDetail });。然后在渲染方法中，您可以访问类似this.state.myDetail

的值

React Axios调用返回整个函数

1 个答案: