Tengo una propiedad de 'enlace de inspección' que tiene el valor de una URL que estoy extrayendo de una API JSON.
"inspection-link": "https://qa.toromont.ca/ToromontCAT/ServiceHub/PublicInfo/ecomm/inspection?sku=N001|BFEN1868620151TLI45073",En lugar de simplemente mostrar la URL del "enlace de inspección" en el pago, necesito poder acceder a la URL y luego mostrar esa información en la página.
El código que tengo a continuación ( <p>{jsonDataProduct?.["inspection-link"]}</p> ) solo muestra la URL en la página en texto, pero por supuesto necesito mostrar los datos de esa URL que provienen de su en la URL JSON.
const PeriodicAnnualInspectionReport = ({ lang, jsonDataProduct, }: Props_PIReport) => { return ( <div className="container"> <div className="row"> <div className="col-lg-12"> {} <h2> {outputEnFr( "Periodic Annual Inspection Report", "Rapport d'inspection annuel périodique", lang )} </h2> <p>{jsonDataProduct?.["inspection-link"]}</p> </div> </div> </div> ); }; export default PeriodicAnnualInspectionReport;Luego, en el componente, monte usando useEffect con dependencias de matriz vacías, obtenga los datos de esa URL y establezca un estado para que actualice la interfaz de usuario, cuando lleguen los datos.
const [data, setData] = useState() useEffect(() => { if (jsonDataProduct) { fetch(jsonDataProduct["inspection-link"]).then(response => response.json()) .then(data => setData(data)); } }, [])Luego puede generar los datos que provienen de esa URL json