Estoy atascado.

Necesito hacer una llamada a la API y luego nuevamente necesito hacer otra llamada a la API pero con los datos recopilados de la primera.

Funciona solo para mí si: Ingrese a mi página -> vaya a vsc -> actualice el código; por ejemplo, agregue // en algún lugar y es lo único que funciona.

Las devoluciones de llamadas no funcionan o simplemente soy un estúpido: C

¿Hay posibilidad de hacerlo de forma sincrónica?

 import './App.css'; import A from './Components/A.js'; import React from 'react'; export class App extends React.Component { state = { a: {} }; componentDidMount() { this.GetA(); } GetA() { fetch("https://localhost:7138/Api/A/GetAll") .then((res) => res.json()) .then((json) => this.setState( a => {return {a : json}})); } render() { return ( <div> <A data={this.state.a}/> </div> ) }; }

//

 import React from "react"; import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap/dist/js/bootstrap.js"; export class A extends React.Component { state = { b: {} }; componentDidMount() { this.GetB();// } GetB() { let entity = []; if ( Object.keys(this.props.data).length !== 0 && Object.keys(this.state.b).length === 0 ) { this.props.data.map((o) => fetch("https://localhost:7138/Api/Sygnature/GetSpecific", { method: "POST", body: JSON.stringify(o), headers: { "Content-Type": "application/json; charset=utf-8", }, }) .then((res) => res.json()) .then((json) => { if (json !== undefined && json !== null) { json.map((x) => { entity.push(x); }); } }) ); this.setState({ b: entity }); } } render() { return ( <div className="d-flex"> <ul className="nav nav-tabs navbar-light bg-light"> {Array.from(this.props.data).map((d) => ( <li className="nav-item" id={d.id} key={d.name + d.id}> <a className="nav-link" data-bs-toggle="tab" href={"#" + d.name} style={{ textTransform: "uppercase", fontWeight: "bold" }} > {d.name} </a> </li> ))} </ul> </div> ); } } export default A;