¿Hay una forma más elegante de verificar todas las variables de estado en mi aplicación de reacción? Actualmente tengo 14 variables de estado dentro de mi aplicación, estoy comprobando el valor de cada una y actualizándolas a una cadena vacía si no pasan el código de validación (dejado vacío) es como:
const [customerName, setCustomerName] = useState(null) const [customerPhone, setCustomerPhone] = useState(null) const [customerEmail, setCustomerEmail] = useState(null) const [customerAddress, setCustomerAddress] = useState(null) const [customerPostal, setCustomerPostal] = useState(null) const [purchasePrice, setPurchasePrice] = useState(null) const [colleagueName, setColleagueName] = useState(null) const [branch, setBranch] = useState(null) const [branchPhone, setBranchPhone] = useState(null) const [otherCompany, setOtherCompany] = useState(null) const [furtherInformation, setFurtherInformation] = useState(null) function submission() { if (customerName === null) { setCustomerName('') } if (customerPhone === null) { setCustomerPhone('') } if (customerEmail === null) { setCustomerEmail('') } if (customerAddress === null) { setCustomerAddress('') } if (customerPostal === null) { setCustomerPostal('') } if (purchasePrice === null) { setPurchasePrice('') } if (surveyType === null) { setSurveyType('') } if (colleagueName === null) { setColleagueName('') } if (branch === null) { setBranch('') } if (branchPhone === null) { setBranchPhone('') } if (company === null) { setCompany('') } if (company === 'Other' && otherCompany===null) { setCompany('Other') setOtherCompany('') } if ( customerName !== '' && customerPhone !== '' && customerEmail !== '' && customerAddress !== '' && customerPostal !== '' && purchasePrice !== '' && surveyType !== '' && colleagueName !== '' && branch !== '' && branchPhone !== '' && company !== '' && otherCompany !== '' ){ console.log('validation passed') } };Esto funciona , por lo que no es el fin del mundo, pero parece que no es muy elegante y siento que podría haber un remedio más conciso.
Gracias
Tal vez algo a lo largo de estas líneas. Como todas estas variables de estado parecen estar estrechamente acopladas. No veo por qué no pueden ser un objeto.
const [sale, setSale] = useState({ customerName: '', customerPhone: '', customerEmail: '', customerAddress: '', customerPostal: '', purchasePrice: '', surveyType: '', colleagueName: '', branch: '', branchPhone: '', company: '', otherCompany: '', }) const checksPasssed = Object.values(sale).every(v => v)Si necesita actualizar uno de ellos, puede usar spread.
setSale({...sale, company: 'yahoo'})Opciones:
Usa el gancho useReducer() . De los documentos:
useReducer suele ser preferible a useState cuando tiene una lógica de estado compleja que involucra múltiples subvalores o cuando el siguiente estado depende del anterior. useReducer también le permite optimizar el rendimiento de los componentes que desencadenan actualizaciones profundas porque puede pasar el envío en lugar de las devoluciones de llamada.
Use algún tipo de administración de estado como Redux , si otros componentes también necesitan acceder a este estado. También puede utilizar la API de contexto .
Puede poner todo este estado en un solo objeto anidado y luego usar useState:
const [nestedState, setNestedState] = useState({ a: 1, b: 'Shivam', c: { name: 'Sj', age: '20', }, }); // Then use `setnestedState()`: setNestedState(prevState => ({ ...prevState, c: { ...prevState.c, age: 22, }, }));