问：

我已经将 react 集成到我的 astro 项目中，希望能加入一些动态功能。一切都很好，除非尝试从我的一个 react 组件内的远程 rest api 端点获取数据。我知道顶级异步，当我尝试它时，它似乎工作正常。但是，我的目标是创建一个可以在单击按钮时自行刷新的组件。因此，为了做到这一点，我选择使用 usestate 和 useffect 钩子来完成任务。一旦我尝试在 useeffect 钩子中使用异步 await 函数进行提取，该组件就会在不获取数据的情况下进行渲染。以下代码不返回除标题以外的任何内容。

import React， { useState， useEffect } from 'react';

your text函数 UserRecords（） { const [users， setUsers] = useState（[]）; const [toggle， setToggle] = useState（true）;your textyour text

your textuseEffect（（） => { async function fetchUsers（） { try { const response = await fetch（“http://localhost:3001/userInfo”）; if （！response.ok） { throw new Error（'网络响应不正常'）; } const userData = 等待 response.json（）; setUsers（用户数据）; } catch （error） { console.error（“获取或解析用户数据时出错：”， error）;your textyour textyour textyour textyour textyour textyour textyour textyour textyour textyour text } your text }

your textfetchUsers（）; }， [切换]）;your text

your textconst changeValue = （） => { setToggle（prevValue => ！prevValue）;your textyour text };

your text返回 （your text <> your text

标题

your text{users.map（（user） => {user.username}）}your text

your text导出默认 UserRecords;

我使用坚实的 js 框架尝试了同样的事情，我也将其添加到 astro 项目中，只是为了看看它会如何比较并且结果相同。顶级异步似乎工作正常，但是当尝试在状态和副作用的上下文中使用它时，它会呈现除端点中所需数据之外的所有内容。