Tengo un objeto de estado React llamado formData con datos de envío de pago del usuario y dentro de formData hay otro objeto llamado billingAdress que contiene datos de facturación del usuario.
state = { user: null, formData: { name: null, company: null, adressOne: null, adressTwo: null, town: null, postcode: null, country: null, phone: null, isBillingAdress: false, billingAdress: { name: null, company: null, adressOne: null, adressTwo: null, town: null, postcode: null, country: null, phone: null, }}Hay función onChange en la entrada
<label>Full Name:</label> <input name="name" onChange={this.handleBillingChange} value={this.state.formData.billingAdress.name} />La función se ve así
handleBillingChange = event => { const formData = { ...this.state.formData, billingAdress: {[event.target.name]: event.target.value }} const errors = { ...this.state.errors, [event.target.name]: '' } this.setState({ formData, errors})}
Estoy tratando de almacenar todo el objeto billingAdress dentro del objeto formData, cuando empiezo a escribir la primera entrada de dirección de facturación, funciona bien, pero cuando empiezo a escribir una segunda entrada, la primera entrada desaparece de un estado.
El problema radica en su función handleBillingChange .
Intente esto para mantener el estado actual de formData.billingAdress cuando cambie una propiedad.
const handleBillingChange = event => { const formData = { ...this.state.formData, billingAdress: { ...this.state.formData.billingAdress, [event.target.name]: event.target.value } } const errors = { ...this.state.errors, [event.target.name]: '' } this.setState({ formData, errors}) }