Javascript 为什么不更新异步/等待函数的UI

这是我用JavaScript创建的第一个网站。我试图从API中获取项目，然后向用户显示它们

我的职能：

getOrderItem = async (itemId: string) => {
    console.log(await api.getItem(itemId))
    return await api.getItem(itemId)
}

这就是我在UI中对它的调用方式：

<h4>Quantity: {item.quantity} Name: {this.getOrderItem(item.id).name}</h4>

Quantity:{item.Quantity}名称：{this.getOrderItem（item.id）.Name}

我的UI没有更新，但我可以看到该功能正在工作：

---

wait/async有什么错？

尝试使用

setState（）

钩子和

useffect（）

钩子，以便在

getOrderItem

完成后，告诉React重新呈现DOM元素

您可以尝试如下设置：

const[getOrderItem，setOrderItem]=useState（{}）
getOrderItem=async（itemId:string）=>{
log（等待api.getItem（itemId））
return wait api.getItem（itemId）
}
useffect（（）=>{
setOrderItem（getOrderItem（））
}, [])
返回(
数量：{item.Quantity}名称：{getOrderItem.Name}
)

在从API获得响应之前，函数不会返回任何内容。当您得到响应时，UI已经呈现出来了。由于该函数不更新任何状态变量，因此UI不会重新呈现。您应该使用状态变量来存储API的响应

getOrderItem = async (itemId: string) => {
    let response = await api.getItem(itemId);
    this.setState({items: {...this.state.items, itemId: response}});
}

现在，可以使用state变量重新渲染

<h4>Quantity: {item.quantity} Name: {item.id in this.state.items ? this.state.items[item.id].name ? this.getOrderItem(item.id) }</h4>

数量：{item.Quantity}名称：{item.id在this.state.items？this.state.items[item.id].Name？this.getOrderItem（item.id）}

---

如果您只需要项的名称，则可以存储response.name而不是response

是否使用react或其他处理状态更新和触发器重新呈现的前端框架？

getOrderItem

返回一个

Promise

@katamaster818 Yes。我正在使用React。好吧，我似乎对JavaScript的工作原理缺乏了解。问题是，我想在UI中调用函数以获取特定的项目信息。您的解决方案将为我的网站中显示的所有项目提供相同的值。哦，那么您是在单个组件中呈现多个项目吗？我已经编辑了我的答案。