0

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

2
  • Amigo, não tenho idéia se é esse o seu caso, por isso coloquei como comentário em vez de resposta, mas tive certa vez um problema com switches que descobri ser por causa do tipo de retorno. Não estava chegando o boolean false, e sim a string "false". Verifica se não é seu caso. Commented 3/08/2021 às 14:38
  • Pior que não é isso não, viu... A api retorna o status (ativo/inativo) em números. Ainda tentando resolver o problema, passei a usar uma const booleana para controle do estado de checked, e depois tentei usando a prop "checked" como hardcoded, mas nada adiantou. Vou até complementar a pergunta com essas tentativas. De qualquer forma, agradeço pela ajuda! Commented 3/08/2021 às 18:04

2 Respostas 2

0

Bom, não da pra ter certeza sem ter o jsx aqui, mas olhando seu codigo e a lib deles, e o fato de que seu component de switch funciona em outros casos, e ele dar o toggle corretamente...etc

const [clientStatus, setClientStatus] = useState<number>(0)

useEffect(() => {
var pClient = Data.get<IClientDto>(`api/management/client/${Id}`)
...
Promise.all([pClient, ...]).then(
([client, ...]) => {
  ...
  setClientStatus(client.Status)
})
}, [])

o seu problema provavlmente está ai, nota que seu state que guarda o valor de checked do switch vem de uma promise... ou seja demora um tempo pra ele ter seu valor alterado e quando é alterado por conta do seu Switch já ter sido reenderizado com o valor inicial de 0, ele fica desabilitado...

Sendo esse o problema, o que vc pode fazer é colocar um loading enquanto realiza a chamada, e só reenderizar o Switch quando terminar de realizar o loading.

5
  • Oi, obrigado pela ajuda! Então, aqui no JSX, tem um loading. Acaba ocorrendo isso mesmo que vc sugeriu, o Switch só é renderizado após o resultado da chamada ter "chegado" (e não ser nulo) Commented 26/08/2021 às 18:47
  • entendi, e o qnd vc testou com hardcoding, o que aconteceu? deu certo ou não?
    – simpa
    Commented 26/08/2021 às 19:34
  • tb não deu certo :/ Commented 26/08/2021 às 20:12
  • kkkk se n deu certo nem no hardcode, ai temos um caso de bruxaria, eu instalaria outra lib com switcher, qualquer coisa fala com o designer se tu pode mudar o modelo
    – simpa
    Commented 26/08/2021 às 22:22
  • Que ódio kkkkkkkkk tava pensando nisso ontem, mas é tão absurdo o fato de não funcionar só em uma tela específica... de qualquer forma, vlw pela ajuda! Commented 27/08/2021 às 10:59
0

Atualização: problema resolvido

Depois de um bom tempo envolvido com outras partes do projeto, voltei a este problema e em poucos minutos a solução mágica veio:

Alterei a const booleana de controle do switch, deixando undefined como valor padrão, ao invés de false.

Antes const [active, setActive] = useState(false)

Depois const [active, setActive] = useState<boolean | undefined>(undefined)

Lembrando que tem a requisição que traz os dados do cliente (incluindo seu status em número), e há a setagem da const de controle. Essa parte não precisou ser alterada.

O problema é resolvido fazendo a verificação da constante. Caso ela seja undefined (ou seja, ainda não sabemos o status do cliente), nada é exibido. Somente após a setagem o switch é exibido, agora sem erro no estado visual inicial.

{ active != undefined ? active ? <Switch checked={true} options={{ color: '#00b0eb' }} onChange={checked => onStatusChange(checked)} /> : <Switch checked={false} options={{ color: '#00b0eb' }} onChange={checked => onStatusChange(checked)} /> : [] }

P.S: é necessário tratar a prop checked do switch como hardcoded, como mostrado acima.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .