0

Estou com uma questão ao receber os dados do banco para os meus checkboxes. Mesmo o valor vindo false do banco, o checkbox fica marcado.

Já tentei várias respostas de fóruns mas devo estar deixando passar alguma coisa.

Recebo o json do banco e faço o looping usando map com cada key correspondente.

No caso abaixo, host.hostseria equivalente ao json retornado de res.data.host:

data: {
    host: "false"
}

Home.js

function Home() {

const { handleSubmit, register, errors } = useForm()

const [users, setUsers] = useState([])

const [file, setFile] = useState('')

useEffect(() => {
    async function loadUser() {

        const userId = localStorage.getItem('id')
        const res = await axios.post(`${process.env.REACT_APP_GET_USER_DATA_URL}/react-getUserData.php`, { userId })
        console.log(res)

        setUsers([...users, res.data])
    }
    loadUser()

    register({ name: 'file' })
}, [register])

function handleChange(e) {
    const isChecked = e.target.checked
    console.log(isChecked)
}

...

return (
    <>

<label className="btn btn-circle border filters-btn">
{users.map((host) => (
     <input
        type="checkbox"
        name="host"
        id="host"
        key={host}
        defaultChecked={host.host}
        ref={register}
        onChange={handleChange}
     />
))}
<i></i>
<span>Hospedagem</span>
</label>
1
  • host tá em texto então é true mesmo, precisa ser host: false para fazer o efeito esperado, ou seja, o tipo que está atrapalhando no seu desenvolvimento.
    – novic
    2/04/2020 às 14:29

1 Resposta 1

2

A variável que está retornando do seu banco não está no formato de verdadeiro ou falso (boolean), é um texto, sendo assim verdadeiro para o ,

Exemplo:

function App() {
  const [value, setValue] = React.useState(false);
  const [texto, setTexto] = React.useState('false');
  return (
    <div>
      <div style={{height: '50px'}}>
        <p>{value.toString()}</p>
        <button onClick={e => setValue(!value)}>
            Mudar estado no formato verdadeiro ou falso
        </button>
      </div>
      <div style={{height: '50px'}}>
        <p>{texto?"verdade":"falso"}</p>
        <button onClick={e => setTexto('false'?'true':'false')}>
          Mudar estado do texto
        </button>
      </div>
    </div>
  )
 }
 ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

para solucionar o seu problema de forma rápida e se puder enviar a informação no formato de verdadeiro ou falso do seu banco, ou então, resolver com uma comparação simples com o texto enviado, exemplo:

defaultChecked={host.host === 'true'}
1
  • 1
    show cara...muito obrigado! ainda sou novo em react então desculpe se faltou alguma coisa. abraço!
    – madsongr
    2/04/2020 às 17:39

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 .