Javascript 如何在组件挂载之前获取获取中的数据？

我试图从节点中的本地服务器获取数据，但我的问题是，当我调用组件的render函数时，状态中的数组用户似乎是空的，因此不会像我所希望的那样在屏幕上呈现用户，奇怪的是，

console.log（users）

我在提取过程中得到了数据，但当我在渲染过程中这样做时，不会给我带来任何东西：

这是迄今为止的代码：

import React，{PureComponent}来自“React”；
从“/Nav”导入Nav；
从“/Interfaces”导入{IState，IProps}；
类Home扩展了PureComponent{
建造师（道具：IProps）{
超级（道具）；
此.state={
用户：[]，
书籍：[]
};
}
getUsers=async（）=>{
const response=等待获取(`http://localhost:5000/users`, {
标题：{
“内容类型”：“应用程序/json”
}
});
const users=wait response.json（）；
for（让用户对用户）{
this.state.users.push（用户）；
}
console.log（this.state.users）；
};
getBooks=async（id:number）=>{
常量令牌=
“EYJHBGCOIJIUZI1NIISINR5CCI6IKPXVCJ9.EYJPZCI6MSWIDXNLCII6IMPLC3VZGIWIAXNBZG1PBII6DHJ1ZSWIAWF0IJOXNTC2NJGZNTKWFQ.1FWmtj-fCsqSza_PWFEWIPP3ZQ50BXDAGRTV5X3CU”；
const response=等待获取(`http://localhost:5000/bookUser/${id}/books`{
标题：{
授权：`Bearer${token}`，
“内容类型”：“应用程序/json”
}
});
const books=wait response.json（）；
这个.setState（{books}）；
};
onUserSelection=（id:number）=>this.getBooks（id）；
组件didlmount（）{
这是getUsers（）；
}
render（）{
const{users}=this.state；
console.log（this.state.users）；
返回(
你好{this.props.username}
身份证件
名称
{users.map（u=>(
this.onUserSelection（u.user\u id）}
>
{u.user_id}
{console.log（u.user_id）}
{u.username}
))}
);
}
}
导出默认主页；

正如前面Sameer的评论中所提到的，您希望在设置状态时避免使用推送。这样做不会触发重新渲染

将您正在执行的

this.state.users.push（user）

替换为以下内容（及其后面的console.log）：

this.setState(prevState => ({
  users: [...prevState.users, user]
}, console.log("updated users", this.state.users)));

这里有些不同

setState中的第一个参数接受函数。该函数中公开了一个参数，它是您以前的状态（prevState）。使用spread操作符，您可以使用旧用户和所有新用户创建一个新阵列

---

其次，由于setState的异步性质，您不能期望在setState函数之后立即运行console.log（）。相反，您可以将回调函数（在本例中为console.log）作为第二个参数传递给setState&它将在完成时被激发。

使用

setState

填充处于状态的用户

this.setState({
users: users
})

在“贴图前渲染”中，执行此操作

{
    users.length>0 &&
    users.map(u => ( <tr key={u.user_id} onClick={() => this.onUserSelection(u.user_id)} > <td>{u.user_id}</td> {console.log(u.user_id)} <td>{u.username}</td> </tr> ))
}

{
用户。长度>0&&
user.map（u=>（this.onUserSelection（u.user\u id）}>{u.user\u id}{console.log（u.user\u id）}{u.username}））
}

首先，使用

setState

将用户设置为状态而不是推送，这样setState将重新呈现页面。感谢您的回复，我已经尝试过了，但不起作用，或者我不知道怎么做……感谢您的回答，我尝试了所有建议的解决方案，但没有结果，仍然得到了一个空数组

{
    users.length>0 &&
    users.map(u => ( <tr key={u.user_id} onClick={() => this.onUserSelection(u.user_id)} > <td>{u.user_id}</td> {console.log(u.user_id)} <td>{u.username}</td> </tr> ))
}