Resuelto Gracias por tu ayuda
Estoy configurando accesorios de componente
<Component myprops={state_variable}/>
El problema es que cuando estoy creando el componente y configurando los accesorios, la variable de estado aún no existe y mi código se rompe. ¿Qué puedo hacer para solucionar este problema? Además, cuando cambio el estado, la propiedad no se actualiza.
<ServiceTicket showOverlay={Tickets_disabled_withError[ticket_num]?.isDisabled} showSelectedError={Tickets_disabled_withError[ticket_num]?.showError} />
Mi variable inicial de estado inicial:
const [Tickets_disabled_withError,setTickets_disabled_withError] = useState({})
Estoy tratando de llamar a la función que actualizará el estado y cambiará el valor al que son iguales los accesorios.
const OverLayOnAll = (enable) => { let tempobject = Tickets_disabled_withError for (let key in tempobject) { if (enable == "true") { tempobject[key].isDisabled = true } else if (enable == "false") { tempobject[key].isDisabled = false } } setTickets_disabled_withError(tempobject) }
Solucioné el problema. Muchas gracias por tu ayuda. Tuve que configurar el uso de encadenamiento opcional?. y también volver a renderizar el componente.
El valor existe. Es solo que el valor en sí mismo no está undefined
. Debe establecer un valor inicial al definir su estado
const [statevariable, setstatevariable] = useState({ somekey: { isDisabled: false // or whatever the initial value should be } }) // or whatever else you need it to be
Para su segundo problema, está usando el mismo puntero. JavaScript hace igualdad por referencia. Ha transformado el valor existente, por lo que React no detecta ningún cambio. La forma más fácil de solucionar esto es crear una copia superficial antes de comenzar a transformar
let tempobject = {...Tickets_disabled_withError}
Tu pregunta no me queda muy clara, pero hay un problema en tu llamada setTickets_disabled_withError
.
Cuando actualiza una propiedad de estado ( ticketsDisabledWithError
) usando su valor anterior, necesita usar el argumento de devolución de llamada.
(Ver https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous )
overlayAll = (enable)=> { setTicketsDisabledWithError((ticketsDisabledWithError)=> { return Object.keys(ticketsDisabledWithError).reduce((acc,key)=> { acc[key].isDisabled = (enabled=="true"); return acc; }, {}); // initial value of reduce acc is empty object }) }
Además, aprenda las convenciones de nomenclatura de variables JS. Te ayudará tanto a ti como a aquellos que intenten ayudarte.