estou usando o componente Switch da biblioteca React-Switchery no React, em um projeto do trabalho. Utilizei ele em diversas telas sem qualquer problema, porém em uma tela específica ocorre o seguinte: mesmo com a propriedade "checked" sendo inicializada com valor true, o componente não aparece como checked. E ao clicar nele pela primeira vez, o estado visual não se altera (o evento de change é chamado normalmente, setando a prop como false - nesse caso é normal que o visual não mude, o problema é apenas com o estado visual inicial). A partir do segundo clique, ocorre tudo como esperado.
P.S: essa é uma tela que mostra os detalhes de um "cliente". O Status 1 é para ativo, e 0 para inativo.
Evento de change:
const onStatusChange = (checked: boolean) => {
let cli: IClientDto = {...client, Status: checked ? 1 : 0}
setClient(cli)
setClientStatus(checked ? 1 : 0) // essa é a setagem importante nesse caso
}
Componente switch de "Ativo/Inativo":
<Switch
checked={clientStatus === 1}
options={{
color: '#00b0eb'
}}
onChange={checked => onStatusChange(checked)}
/>
Declaração da const clientStatus e momento de setagem como true (client.Status é 1)
const [clientStatus, setClientStatus] = useState<number>(0)
useEffect(() => {
var pClient = Data.get<IClientDto>(`api/management/client/${Id}`)
...
Promise.all([pClient, ...]).then(
([client, ...]) => {
...
setClientStatus(client.Status)
})
}, [])
Atualização: novas tentativas frustadas de resolução do problema
Usando uma const booleana ao invés da numérica para controle do estado do switch
const [active, setActive] = useState<boolean>(false)
useEffect(() => {
var pClient = Data.get<IClientDto>(`api/management/client/${Id}`)
...
Promise.all([pClient, ...]).then(
([client, ...]) => {
...
setActive(client.Status == 1)
})
}, [])
const onStatusChange = (checked: boolean) => {
let cli: IClientDto = {...client, Status: checked ? 1 : 0}
setClient(cli)
setActive(checked)
}
<Switch
checked={active}
options={{
color: '#00b0eb'
}}
onChange={checked => onStatusChange(checked)}
/>
Mantendo a const booleana para controle, porém tratando a prop checked como "hardcoded" (duas tentativas)
{ active
? <Switch
checked={true}
options={{
color: '#00b0eb'
}}
onChange={checked => onStatusChange(checked)}
/>
: <Switch
checked={false}
options={{
color: '#00b0eb'
}}
onChange={checked => onStatusChange(checked)}
/>
}
{ active
? <Switch
checked
options={{
color: '#00b0eb'
}}
onChange={checked => onStatusChange(checked)}
/>
: <Switch
options={{
color: '#00b0eb'
}}
onChange={checked => onStatusChange(checked)}
/>
}
Se alguém conseguir me ajudar a solucionar esse erro, agradeço :P