Tengo el siguiente pequeño componente React que quiero mostrar la información de la cita a través de una solicitud de get de Axios y actualizar la cita a través de una solicitud de put de Axios.
Bueno, tengo la solicitud de put funcionando cuando el usuario hace clic en el botón.
Pero no estoy seguro de cómo mostrar la información de la cita.
Cuando se carga la página, quiero que el usuario vea la información de su cita en la sección de descripción de la appointmentDescription , pero no estoy seguro de cómo completarla.
Aquí está mi código:
import React from "react"; import axios from 'axios'; import Button from 'react-bootstrap/Button'; const extendAppointment = async (id) => { await axios.put('api/appointments/ExtendAppointment/' + id) .then(res => console.log(res.data)); }; const handleExtend = async (id) => { await extendAppointment(id); }; const getAppointment = async (id) => { await axios.get('api/appointments/' + id); } const Extend = ({ appointmentId }) => { return ( <div id="appointment"> <div id="appointmentDescription"> Hi! Here are the details for your appointment: {/*show appointment details*/} </div> <div id="updateAppointment"> Do you need to extend your appointment? <Button onClick={() => handleExtend(appointmentId)}>Click here to extend your appointment</Button> </div> </div> ); } export default Extend;use useState hook para almacenar datos después de la llamada a la API
import React, { useState } from "react"; import axios from 'axios'; import Button from 'react-bootstrap/Button'; const Extend = ({ appointmentId }) => { const [appointmentData, setAppointmentData] = useState({}) const extendAppointment = async (id) => { await axios.put('api/appointments/ExtendAppointment/' + id) .then(res => { if (res.data) { setAppointmentData(res.data) } }); }; const handleExtend = async (id) => { await extendAppointment(id); }; const getAppointment = async (id) => { await axios.get('api/appointments/' + id); } return ( <div id="appointment"> <div id="appointmentDescription"> {appointmentData} </div> <div id="updateAppointment"> Do you need to extend your appointment? <Button onClick={() => handleExtend(appointmentId)}>Click here to extend your appointment</Button> </div> </div> ); } export default Extend;Lea sobre useState , es una forma clásica de almacenar datos a nivel de componente y completar donde sea necesario.
Al combinarlo con useEffect , invoca sus API después de que se monta el DOM.
import React, { useState, useEffect } from "react"; export const Extend = ({ appointmentId }) => { const [appointmentDetails, setAppointmentDetails] = useState(null); const [error, setError] = useState(null); // any api error // This should be inside your React component to be able to set data in your component. const getAppointment = async (id) => { try { setError(false); const { data } = await axios.get('api/appointments/' + id); setAppointmentDetails(data); } catch (error) { setError(true); } } const extendAppointment = async (id) => { await axios.put('api/appointments/ExtendAppointment/' + id) .then(res => console.log(res.data)); }; const handleExtend = async (id) => { await extendAppointment(id); }; // Invoke api after the component is mounted on the DOM. useEffect(() => { getAppointment(); }, []) // Empty so it gets called only once! return ( <div id= "appointment" > // Show appointment details only when the its set in state { appointmentDetails && !error ( <div id="appointmentDescription"> Hi! Here are the details for your appointment: </div> )} <div id="updateAppointment"> Do you need to extend your appointment? <Button onClick={() => handleExtend(appointmentId)}>Click here to extend your appointment</Button> </div> </div> ); } Ahora, donde sea que necesite renderizar el componente Extend , simplemente pase el identificador de appointmentId como accesorio.
<Extend appointmentId={1} />Deberías usar useState para este.
algo como eso :
import React, { useState } from "react"; import axios from 'axios'; import Button from 'react-bootstrap/Button'; const Extend = ({ appointmentId }) => { const [info, setInfo] = useState('') const extendAppointment = async (id) => { await axios.put('api/appointments/ExtendAppointment/' + id) .then(res => console.log(res.data)); }; const getAppointment = async (id) => { const result = await axios.get('api/appointments/' + id); setInfo(result.data) // put what you get, depend on your API } const handleExtend = async (id) => { await extendAppointment(id); } return ( <div id="appointment"> <div id="appointmentDescription"> Hi! Here are the details for your appointment: {info} // info will dislplay here </div> <div id="updateAppointment"> Do you need to extend your appointment? <Button onClick={() => handleExtend(appointmentId)}>Click here to extend your appointment</Button> </div> </div> ); }