为什么 UI 不更新异步/等待 function

Question

这是我使用 JavaScript 创建的第一个网站。 我正在尝试从 API 获取项目，然后为用户显示它们。

我的 function：

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>

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

等待/异步我做错了什么？

Answer 1

尝试使用setState()钩子和useEffect()钩子，这样你就可以告诉 React 在getOrderItem完成后重新渲染 DOM 元素。

您可以尝试这样设置：

const [getOrderItem, setOrderItem] = useState({})

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

useEffect(() => {
    setOrderItem(getOrderItem())
}, [])

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

Answer 2

您的 function 在收到 API 的回复之前不会返回任何内容。 当您收到响应时，UI 已经呈现。 由于 function 不会更新任何 state 变量，因此您的 UI 不会重新呈现。 您应该使用 state 变量来存储 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>

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