我可以从进行 API 调用的数据库中获取数据，然后将其传递给另一个进行另一个 API 调用的函数吗

Question

在反应中，我想从数据库中获取数据。我试图使用 getCoor() 从数据库中获取数据并放入构造函数方法中。我定义了变量私人data:any=[]；并定义了一个状态，this.state={data:[]}

我正在尝试

使用 API 调用从数据库获取数据
使用另一个 API 调用传递此数据。

问题：来自 getCoor 的数据没有存储在我的变量中。

  componentDidMount() {
    this.defaultCoor();
    const Markers = async () => {
      await this.getCoor(); // this.data=json;
      await this.addGoogleMapScript();//do something with this.data 

    }
    Markers();
}

this.data 为空。我正在等待 getCoor 完成 API 调用，获取数据并传递给 addGoogleMapscript，这在 React 中可能吗？

解决方案

private getCoor() {
    const qurl = `/_api/web/lists/getbytitle('${this.props.list}')/items?$select=*&$orderby=Created asc`;

    const opt: ISPHttpClientOptions = {
      headers: { "Content-Type": "application/json;odata=verbose" }
    };

    return this.props.spHttpClient
      .get(
        this.props.context.pageContext.web.absoluteUrl + qurl,
        SPHttpClient.configurations.v1,
        opt
      )
      .then((response: SPHttpClientResponse) => {
        return response.json().then((json: any) => {
          this.setState({ data: json.value });
          return (this.data = json); 
        });
      });
  }

这个.data:any=[];在基于 class 的 React 组件中的构造函数方法之后定义在API函数中添加Return和returnthis.data:)

Answer 1

您正在获取数据但未将其分配给变量。为此，您的 Markers 函数应如下所示。

componentDidMount() {
  this.defaultCoor();
  const Markers = async () => {
    const data = await this.getCoor();  // this.data=json;
    await this.addGoogleMapScript(data);  //do something with this.data 
  }
  Markers();
}

我可以从进行 API 调用的数据库中获取数据，然后将其传递给另一个进行另一个 API 调用的函数吗

Can I get the data from database that makes an API call then pass it to another function that makes an another API call

reactjs

spfx

react-lifecycle