我有一个userid数组，我需要显示与该数组相关的名称列表。 我想调用render方法内部的API调用并获取用户名。 但这不起作用。 如何解决此问题？
下面是我的render方法:
render(){
...
return(
<div>
{this.state.users.map(userId => {
return (
<div> {this.renderName(userId )} </div>
)
})}
</div>
)
...
}
下面是renderName函数:
renderName = (userId) => {
axios.get(backendURI.url + '/users/getUserName/' + userId)
.then(res => <div>{res.data.name}</div>)
}
基本上，您不能在呈现内部使用异步调用，因为它们返回的承诺不是有效的JSX。 而是使用componentDidMount和setState用用户的名称更新用户数组。
通常，您不会直接在render方法中更改状态或提取数据。 状态总是被动作/事件（点击，输入或其他）改变。 render方法在每次属性/状态更改时被调用。 如果您直接更改render方法中的状态，那么您最终将得到一个无限循环。
您应该使用生命周期方法或钩子从API加载数据。 下面是官方React FAQ中的一个示例:https://reactjs.org/docs/faq-ajax.html
这将不会呈现任何内容，因为API调用是异步的，而且由于renderName函数不返回任何内容，它将返回未定义的内容。
您应该创建一个函数，该函数将为所有用户ID调用api并在状态中更新
getNames = () => {
const promises = [];
this.state.users.forEach((userId) => {
promises.push(axios.get(backendURI.url+'/users/getUserName/'+userId));
})
// Once all promises are resolved, update the state
Promise.all(promises).then((responses) => {
const names = responses.map((response) => response.data.names);
this.setState({names});
})
}
现在，只要users数据可用，就可以在ComponentDidMount或ComponentDidUpdate中调用此函数。
最后，您可以直接迭代名称并呈现它们
<div>
{this.state.names.map((name) => {
return <div> {name} </div>;
})}
</div>
