Node.js React-inside-map中的render方法中的API调用

我有一个

userId

数组，我需要显示与该数组相关的名称列表。我想在

render

方法中调用API调用并获取用户名。但这是行不通的。如何解决此问题

下面是我的

渲染
方法：

render(){
    ...
    return(
        <div>
            {this.state.users.map(userId => {
                return (
                    <div> {this.renderName(userId )} </div>
                )
            })}
        </div>
    )
    ...
}

通常，您不会直接在render方法中更改状态或获取数据。状态总是由操作/事件（单击、输入或其他）更改。每次属性/状态更改时都会调用render方法。如果直接在render方法中更改状态，则最终会出现无限循环

您应该使用生命周期方法或挂钩从api加载数据。下面是官方React常见问题解答中的一个示例：
通常，您不会直接在render方法中更改状态或获取数据。状态总是由操作/事件（单击、输入或其他）更改。每次属性/状态更改时都会调用render方法。如果直接在render方法中更改状态，则最终会出现无限循环

您应该使用生命周期方法或挂钩从api加载数据。下面是官方React FAQ中的一个示例：
基本上，您不能在呈现中使用异步调用，因为它们返回的承诺是无效的JSX。而是使用componentDidMount和setState用用户的名称更新用户数组。
基本上不能在呈现中使用异步调用，因为它们返回的承诺无效JSX。而是使用componentDidMount和setState用用户的名称更新用户数组。
这不会呈现任何内容，因为API调用是异步的，而且由于
renderName
函数没有返回任何内容，它将返回未定义的内容

您应该创建一个函数，该函数将为所有用户标识调用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});
    })

}

现在，只要
用户
数据可用，就可以在
组件安装
或
组件更新
中调用此函数

最后，您可以直接迭代名称并呈现它们

<div>
  {this.state.names.map((name) => {
    return <div> {name} </div>;
  })}
</div>


{this.state.names.map（（name）=>{
返回{name}；
})}
这不会呈现任何内容，因为API调用是异步的，而且由于
renderName
函数没有返回任何内容，它将返回未定义的内容

您应该创建一个函数，该函数将为所有用户标识调用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});
    })

}

现在，只要
用户
数据可用，就可以在
组件安装
或
组件更新
中调用此函数

最后，您可以直接迭代名称并呈现它们

<div>
  {this.state.names.map((name) => {
    return <div> {name} </div>;
  })}
</div>


{this.state.names.map（（name）=>{
返回{name}；
})}
您可以将用户名作为自己的组件：


const请求=（id）=>
新承诺（（决议）=>
setTimeout（解析（`id为：${id}`），2000）
);
const UserName=React.memo（函数用户（{userId}）{
const[name，setName]=React.useState（“”）；
React.useffect（（）=>{
//发出请求并将本地状态设置为结果
请求（userId）。然后（（result）=>setName（result））；
}，[userId]）；
返回{name}；
});
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：[1,2]，
};
}
render（）{
返回(

{this.state.users.map（（userId）=>(
))}

);
}
}
ReactDOM.render（，document.getElementById（'root'））
您可以将用户名作为自己的组件：


const请求=（id）=>
新承诺（（决议）=>
setTimeout（解析（`id为：${id}`），2000）
);
const UserName=React.memo（函数用户（{userId}）{
const[name，setName]=React.useState（“”）；
React.useffect（（）=>{
//发出请求并将本地状态设置为结果
请求（userId）。然后（（result）=>setName（result））；
}，[userId]）；
返回{name}；
});
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：[1,2]，
};
}
render（）{
返回(

{this.state.users.map（（userId）=>(
))}

);
}
}
ReactDOM.render（，document.getElementById（'root'））

导出默认值（）=>{
让[users，setUsers]=useState（[]）；
useffect（（）=>{
让fetchUsersInfoRemote=Promise.all（[…数组（10）].map（异步（\ux，索引）=>{
试一试{
let response=等待axios.get(`https://jsonplaceholder.typicode.com/posts/${index+1}`）；
返回响应数据；
}
捕获（错误）{
返回；
}
}));
然后（data=>setUsers（data））；
},[]);
返回(

{
user.map（user=>（
{JSON.stringify（user，null，2）}
）
}

);
}
导出默认值（）=>{
让[users，setUsers]=useState（[]）；
useffect（（）=>{
让fetchUsersInfoRemote=Promise.all（[…数组（10）].map（异步（\ux，索引）=>{
试一试{
let response=等待axios.get(`https://jsonplaceholder.typicode.com/posts/${index+1}`）；
返回响应数据；
}
捕获（错误）{
返回；
}
}));
然后（data=>setUsers（data））；
},[]);
返回(

{
user.map（user=>（
{JSON.stringify（user，null，2）}
）
}

);
}
api调用是否尝试返回？必须返回axios.getI返回硬编码字符串。但它也不起作用。API调用正常工作您无法将jsx设置为promiseuse
async/await
您是否尝试返回API调用？您必须返回axios.getI返回了硬编码字符串。但它也不起作用。API调用工作正常您无法将jsx设置为promiseuse
async/await