React Function return nothing - reactjs

Question

I am trying to get Display Name getUserinfo() based on a User ID getList()
I have attempted
to use a variable to catch the data and feed to getList().
to use state variables to setState and pass data to getList(). but it seems State is asynchronous, so it failed
Problem: why my getUserinfo() cannot return a value for getList() to use ?
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

Because you have not returned anything from getUserInfo, you had just called this.props.spHttpClient.get() without returning its value, for instance:
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 way, when you call this.getUserinfo(authorid) you will get a promise and you can use its value as follows:
this.getUserinfo(authorid).then( name => {
// use its name
});

Answer 2

This is how you would write it using async/await which improves the readability
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
}
}
You can aply the same style to getList