Soy nuevo en reaccionar y actualmente estoy trabajando en un proyecto. Usualmente uso Class Components , sin embargo, estoy tratando de aprender Functional Components pero encuentro un problema con setState .
Mi componente:
function GetCustomerDetailsFc(this: any, props: CustomerModel): JSX.Element { const [state, setState] = useState(''); async function send(){ try { const response = await axios.get<CustomerModel>(globals.urls.customerDetails) store.dispatch(oneCustomerAction(response.data)); console.log(response.data) setState( {customer: response.data}); } catch (err) { notify.error(err); } } useEffect(() => { send(); }); return ( <><h1>{this.state.customer.email}</h1></> ); } export default GetCustomerDetailsFc;No estoy seguro de cómo guardar el estado para poder leerlo. cuando registro la solicitud, puedo ver que el back-end realmente devuelve datos que contienen:
User details : (identificación, correo electrónico, contraseña, etc.) Una matriz de Coupons vinculados a la compra de los usuarios.
así que básicamente puedo ver que la solicitud responde correctamente, sin embargo, dado que soy nuevo, no estoy seguro exactamente acerca de la sintaxis y cómo podría leer correctamente los datos.
Modelo de cliente:
class CustomerModel { public id: number; public firstName :string; public lastName :string; public email: string; public token: string; public password: string; } export default CustomerModel;Nota: Utilizo redux para este proyecto y almaceno los datos en consecuencia.
Gracias.
Si los datos devueltos están destinados a usarse localmente en este componente, lo que pase a useState debe coincidir con la respuesta que recibe del servidor.
Entonces, si, por ejemplo, su servidor devuelve un objeto CostomerModel, debe iniciar su useState con un objeto:
const [ customer, setCustomer ] = useState({}) try{ const response = await axios.get<CustomerModel>(globals.urls.customerDetails) ... setCustomer(response); ... }