Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Objeto vazio

Bom Dia! Estou com o codigo acredito que bem parecido com o da Aula, a questão que mesmo depois de colocar useEffect o formulario de DadosUsuario continua um objeto vazio.

FormularioCadastro

import React, { useEffect, useState } from 'react'
import DadosEntrega from './DadosEntrega'
import DadosPessoais from './DadosPessoais'
import DadosUsuario from './DadosUsuarios'

function FormularioCadastro({ aoEnviar, validarCpf }) {
  const [etapaAtual, setEtapaAtual] = useState(0)
  const [dadosColetados, setDados] = useState({})

  useEffect(() => {
    console.log(dadosColetados)
  })

  const formularios = [
    <DadosUsuario aoEnviar={coletarDados} />,
    <DadosPessoais aoEnviar={coletarDados} validarCpf={validarCpf} />,
    <DadosEntrega aoEnviar={coletarDados} />
  ]

  function coletarDados(dados) {
    setDados({ ...dadosColetados, ...dados })
    proximo()
  }

  function proximo() {
    setEtapaAtual(etapaAtual + 1)
  }

  return <>{formularios[etapaAtual]}</>
}
export default FormularioCadastro
DadosUsuario

import React, { useState } from 'react'
import { Button, TextField } from '@material-ui/core'

function DadosUsuario({ aoEnviar }) {
  const [email, setEmail] = useState('')
  const [senha, setSenha] = useState('')
  return (
    <form
      onSubmit={event => {
        event.preventDefault()
        aoEnviar()
      }}
    >
      <TextField
        value={email}
        onChange={event => {
          setEmail(event.target.value)
        }}
        id="email"
        label="email"
        type="email"
        required
        variant="outlined"
        margin="normal"
        fullWidth
      />
      <TextField
        value={senha}
        onChange={event => {
          setSenha(event.target.value)
        }}
        id="senha"
        label="senha"
        type="password"
        required
        variant="outlined"
        margin="normal"
        fullWidth
      />
      <Button type="submit" variant="contained" color="primary">
        Cadastra
      </Button>
    </form>
  )
}

export default DadosUsuario

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!

Fala Barbara, tudo bem? Espero que sim!

O que acontece é que a função coletarDados que passamos para os componentes espera receber um parâmetro dados (que é um objeto contendo os dados que deverão ser salvos no estado). Para resolver devemos passar esse parâmetro para a função, como por exemplo, no componente DadosUsuario, queremos enviar email e senha, então passaremos como parâmetro para a função aoEnviar esse dados em forma de objeto:

function DadosUsuario({ aoEnviar }) {
  const [email, setEmail] = useState('')
  const [senha, setSenha] = useState('')
  return (
    <form
      onSubmit={event => {
        event.preventDefault()
        aoEnviar({ email, senha }) //Aqui passamos email e senha como objeto para a função armazenar esses dados
      }}
    >
      <TextField
        value={email}
        onChange={event => {
          setEmail(event.target.value)
        }}
        id="email"
        label="email"
        type="email"
        required
        variant="outlined"
        margin="normal"
        fullWidth
      />
      <TextField
        value={senha}
        onChange={event => {
          setSenha(event.target.value)
        }}
        id="senha"
        label="senha"
        type="password"
        required
        variant="outlined"
        margin="normal"
        fullWidth
      />
      <Button type="submit" variant="contained" color="primary">
        Cadastra
      </Button>
    </form>
  )
}

export default DadosUsuario

E isso você deve repetir para todos os formulários.

Espero ter ajudado, abraços e bons estudos :D

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software