Los siguientes datos de muestra provendrán de la llamada API de back-end. El backend es un matraz y la API ya está instalada en el backend.
const rows = [ { name: "XYZ", age: "12", email: "xyz@gmail.com" }, { name: "David", age: "13", email: "David@gmail.com" }, { name: "abc", age: "12", email: "abc@gmail.com" } ]¿Cómo puedo integrar la API de backend con React? Soy nuevo en reaccionar, así que no sé cómo debo proceder.
En React tendrás que usar dos ganchos: useState y useEffect . El primero te ayudará a conservar los datos para que puedas usarlos y el segundo te ayudará a obtenerlos.
function Component() { const [data, setData] = useState(null); useEffect(() => { fetch('your endpoint here').then(res => { if (res.status === 200) { return res.json(); } else { // handle error } }).then(data => { setData(data); }).catch(err => { // handle error }) }, []); if (data !== null) { return <p>Data is here {data.length}</p>; } return <p>Loading the data</p>; } Y solo para aclarar que necesitamos usar useEffect , por lo que activamos la solicitud solo una vez cuando el componente está montado. Este es el efecto de usar [] para la lista de dependencias como segundo argumento del gancho.
Puede usar axios para enviar solicitudes de API.
const [state,setState] = useState() useEffect(()=>{ axios.get(url) .then(res=>setState(res.data)) .catch(err=>console.log(err)) },[])