Estoy tratando de establecer el estado desde una llamada API asíncrona y luego renderizar dinámicamente algunos JSX en función de los datos devueltos.

El problema es que creo que el estado se establece solo después de que JSX ya se haya renderizado, y dado que está en un gancho useEffect con una dependencia ("[]"), solo se procesa en la carga inicial. Por lo tanto, el map en JSX no se ejecuta.

Sé que la API está devolviendo los datos correctos, como puedo ver en el console.log , pero no estoy seguro de adónde ir desde aquí. Intenté agregar la variable de workspaces de trabajo como una dependencia del enlace useEffect, pero eso solo provoca un bucle infinito. ¿Algunas ideas?

 export const WorkspaceToggle = () => { const [workspaces, setWorkspaces] = useState([]) useEffect(() => { (async () => { const data = await getUserWorkspaces() setWorkspaces(data) console.log(data) })(); }, []); return ( <> <Container> <DropdownCon> <DropdownToggle>{dropdownText}</DropdownToggle> <DropdownMenu> {workspaces.map((space: any) => { <DropdownItem eventKey="1">{space.name} Workspace</DropdownItem> }) as ReactNode} </DropdownMenu> </DropdownCon> </Container> </> ) }