React 函数 return 无

Question

我正在尝试根据用户 ID 获取显示名称 getUserinfo() getList() 我尝试过

使用变量捕获数据并提供给 getList()。
使用状态变量来设置状态并将数据传递给 getList()。但似乎状态是异步的，所以它失败了

问题：为什么我的 getUserinfo() 不能 return getList() 使用的值？

 private getUserinfo(userid: number) {
    var result;
    let url;
    url = `/_api/web/GetUserById(${userid})`;
    const opt: ISPHttpClientOptions = {
      headers: { "Content-Type": "application/json;odata=verbose" }
    };

    this.props.spHttpClient
      .get(
        this.props.context.pageContext.web.absoluteUrl + url,
        SPHttpClient.configurations.v1,
        opt
      )
      .then((response: SPHttpClientResponse) => {
        response.json().then((json: any) => {
          if (json.Title) {
            let name = json.Title;
            let email = json.Email;
            let issiteadmin = json.IsSiteAdmin;

            //debugger;
            return name;  // this has value but it returns nothing in another function I called
          }
        });
      });
  }

private getList() {
    this.state.data.length = 0;
    const qurl =
      "/_api/web/lists/getbytitle('list')/items?$select=*&$orderby=Modified desc";

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

    this.props.spHttpClient
      .get(
        this.props.context.pageContext.web.absoluteUrl + qurl,
        SPHttpClient.configurations.v1,
        opt
      )
      .then((response: SPHttpClientResponse) => {
        response.json().then((json: any) => {
          for (let i = 0; i < json.value.length; i++) {

            let authorid = json.value[i].AuthorId;
            let editorid = json.value[i].Editorid;
            let Authorname = this.getUserinfo(authorid);
            let Editorname = this.getUserinfo(editorid);

            debugger;

            this.setState({
              data: [
                ...this.state.data,
                {

                  Authorname,
                  Editorname
                }
              ]
            });
          }
        });
      });
  }

Answer 1

因为你没有从 getUserInfo 返回任何东西，你刚刚调用了 this.props.spHttpClient.get() 而没有返回它的值，例如：

private getUserinfo(userid: number) {
  ...
  return this.props.spHttpClient.get( ... )
    .then((response: SPHttpClientResponse) => {
      return response.json().then((json: any) => {
        if (json.Title) {
          let name = json.Title;
          let email = json.Email;
          let issiteadmin = json.IsSiteAdmin;
          return name;  // this has value but it returns nothing in another function I called
        }
      });
  });
}

这样，当您调用 this.getUserinfo(authorid) 时，您将获得一个承诺，您可以按如下方式使用它的值：

 this.getUserinfo(authorid).then( name => {
    // use its name
 });

Answer 2

这就是您使用 async/await 编写它的方式，这提高了可读性

private async getUserinfo(userid: number) {
    var result;
    let url;
    url = `/_api/web/GetUserById(${userid})`;
    const opt: ISPHttpClientOptions = {
      headers: { "Content-Type": "application/json;odata=verbose" }
    };

    const response: SPHttpClientResponse = await this.props.spHttpClient
      .get(
        this.props.context.pageContext.web.absoluteUrl + url,
        SPHttpClient.configurations.v1,
        opt
      )
    const json = await response.json();

    if (json.Title) {
      let name = json.Title;
      let email = json.Email;
      let issiteadmin = json.IsSiteAdmin;

      //debugger;
      return name;  // this has value but it returns nothing in another function I called
    }
  }

您可以将相同的样式应用于getList

React 函数 return 无

React Function return nothing

return-value

reactjs