Necesito actualizar mi estado después de actualizar/configurar un estado diferente en mi enlace useEffect. Hasta ahora no funciona. ¿Qué estoy haciendo mal aquí?
La lógica isDisabled depende de los valores de los otros estados.
const OffersDialogueButton = ({ type, status, }) => { const { invitationType, status: cardStatus } = useJobPositionsContext(); const { jobPosition } = useJobDetailContext(); const [dialogStatus, setDialogStatus] = useState<CardStatus>(); const [dialogType, setDialogType] = useState<CardType>(); const [color, setColor] = useState<string>(); const [isDisabled, setIsDisabled] = useState(false); useEffect(() => { setDialogStatus(status || cardStatus); setDialogType(type || invitationType || 'default'); setIsDisabled( (dialogType === 'invitation' && dialogStatus !== 'pending') || (dialogType === 'application' && cardStatus !== 'accepted'), ); setColor(BUTTON_VARIANT_BY_STATUS[dialogStatus]); }, [type, status, isDisabled]);dialogType y dialogStatus se configuran en la misma función con state set que es asíncrono, por lo que no puede esperar que se configuren cuando los verifique en la misma función. Debe tener un nuevo efecto de uso para esas variables o tener una variable local para los controles.
Como entiendo que desea hacer setIsDisabled por setDialogType, debe usar otro useEffect
React.useEffect(() => { setIsDisabled( (dialogType === 'invitation' && dialogStatus !== 'pending') || (dialogType === 'application' && cardStatus !== 'accepted'), ); }, [dialogType])setDialogType es asíncrono, no puede acceder a él inmediatamente después de setState.
Lea más sobre el estado de reacción aquí Estado
Al calcular isDisabled y variables de estado de color , debe usar los nuevos valores de dialogStatus y dialogType .
const OffersDialogueButton = ({type, status}) => { const { invitationType, status: cardStatus } = useJobPositionsContext(); const { jobPosition } = useJobDetailContext(); const [dialogStatus, setDialogStatus] = useState<CardStatus>(); const [dialogType, setDialogType] = useState<CardType>(); const [color, setColor] = useState<string>(); const [isDisabled, setIsDisabled] = useState(false); useEffect(() => { const nextDialogStatus = status || cardStatus; const nextDialogType = type || invitationType || 'default'; const nextIsDisabled = (nextDialogType === 'invitation' && nextDialogStatus !== 'pending') || (nextDialogType === 'application' && cardStatus !== 'accepted'); const nextColor = BUTTON_VARIANT_BY_STATUS[nextDialogStatus]; setDialogStatus(nextDialogStatus); setDialogType(nextDialogType); setIsDisabled(nextIsDisabled); setColor(nextColor); }, [status, cardStatus, type, invitationType]);