He estado usando ganchos durante un tiempo y pensé que entendía lo básico, pero desde ayer tengo un error en mi código que me hace sentir un poco abrumado. El código es simple, creo:

const initialState = { userId: "", clientId: "", discount: "", paymentMethod: "CASH", medicalInurance: "", total: "", pending: "", detail: [ { product: { id: 1, name: "u1v-13cs" }, unitPrice: 1500, totalPrice: 2400, discount: 20, quantity: 2 } ], payments: { amount: 1000, invoice: "REGULAR", paymentMethod: "CASH" } }; function sale = () ={amp}gt; { const [values, setValues] = React.useState(initialState); return {amp}lt;FormSteps values={values} /{amp}gt; } 

Como puede ver, el código es bastante simple, pero el estado inicial es bastante grande. Y el error es que el estado se establece en nulo con ese gran objeto. Si simplemente elimino algunas teclas como esa:

 const initialState = { userId: "", clientId: "", discount: "", paymentMethod: "CASH", insurance: "", total: "", pending: "" }; 

funciona como se esperaba y el estado inicial está bien configurado.

Sé que simplemente podría dividir el estado inicial, pero hace que mi lógica sea diferente con otros componentes de forma similares, por lo que primero quiero entender este comportamiento.