Tengo una API de php que selecciona la base de datos y devuelve estos datos en json, me gustaría mostrarlos en una tabla en la aplicación React. Intenté de esta manera pero no obtuve ningún resultado:
import React from 'react' import JsonData from 'http://localhost/index.php' //My test api is index.php function Body(){ const DisplayData=JsonData.map( (info)=>{ return( <tr> <td>{info.id}</td> <td>{info.name}</td> </tr> ) } ) return( <div> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Nome</th> </tr> </thead> <tbody> {DisplayData} </tbody> </table> </div> ) } export default Body;No puede hacer una llamada a la API de esa manera en reaccionar.
Para realizar la llamada a la API, puede usar la función de fetch o confiar en bibliotecas externas como axios .
ejemplo con buscar:
componentDidMount() { // Simple GET request using fetch fetch('http://localhost/index.php') .then(response => response.json()) .then(data => this.setState({ myCoolJSON: data})); }Recuerda que la llamada se realiza de forma asíncrona.
Tienes algunos problemas en tu código,
primero debe usar un cliente http para obtener sus datos, por ejemplo, fetch , axios , etc.
segundo, debe usar un state para administrar sus datos porque debe volver a procesar su componente después de que se obtengan sus datos, o puede reconsiderar la composición de sus componentes de manera que su componente se monte en la página solo después de que sus datos estén listos (y el paso de los datos listos como apoyo).
este es un ejemplo de trabajo usando su código:
https://codesandbox.io/s/fervent-chaum-uxwexq?file=/src/App.js
Aquí está la función de solicitud
async function fetchData() { const url = "https://dummyjson.com/carts"; const r = await (await fetch(url)).json(); return r.carts[0].products; }Esto definió el estado y realiza una llamada después de montar el componente:
const [rows, setRows] = React.useState([]); async function fetchRows() { setRows(await fetchData()); } React.useEffect(() => fetchRows, []); también considere usar un atributo key cuando esté representando una lista usando .map()