2

Estou desenvolvendo uma aplicação com o React com Hooks e componentes funcionais, e me deparei com a seguinte logica: eu preciso renderizar em tela dos componentes funcionais, ambos com arrays de forms dentro do componente principal, em vez de eu mandar as informações para minha API dentro de cada componente achei mais pratico os componentes filhos passarem os arrays para o componente pai e o mesmo mandar uma vez, então pensei em passar como props uma função que seta o array num estado do componente pai, porem toda vez que tento acessar essa função a partir do componente filho da um erro.

Componente pai:

function Config(){

    const [registerData, setRegisterData] = useState([])
    const [deleteData, setDeleteData] = useState(null)

    function setRegister(dados){
        setRegisterData(dados)
    }

    function setDelete(dados){
        setDeleteData(dados)
    }

    console.log(registerData, deleteData)

    return(
        <div>
            <Register data={setRegister} />
            <br />
            <Delete data={setDelete} />
        </div>
    )
}
export default Config;

Componente filho:

function Register({props}){

    const [usuario, setUsuario] = useState('')
    const [telefone, setTelefone] = useState('')
    const [unidade, setUnidade] = useState('')
    const [departamento, setDepartamento] = useState('')
    const [cargo, setCargo] = useState('')


    const form = {usuario: usuario, telefone: telefone, unidade: unidade, departamento: departamento, cargo: cargo}

    props.setRegister(form);

    return(
        <div className="app">

            <center>
            <input type="text" onChange={(e) => setUsuario(e.target.value)} className="form-input" placeholder="Usuário" />
            <br />
            <br />
            <input type="text" onChange={(e) => setTelefone(e.target.value)} className="form-input" placeholder="Telefone" />
            <br />
            <br />
            <select>
                <option onChange={(e) => setUnidade(e.target.value)}>Selecione uma unidade</option>
                <option value="UB">UB</option>
                <option value="UG">UG</option>
                <option value="UM">UM</option>
                <option value="UP">UP</option>
                <option value="UV">UV</option>
                <option value="UL">UL</option>
            </select>
            <br />
            <br />
            <input type="text" onChange={(e) => setDepartamento(e.target.value)} className="form-input" placeholder="Departamento" />
            <br />
            <br />
            <input type="text" onChange={(e) => setCargo(e.target.value)} className="form-input" placeholder="Cargo" />
            <br /><br />
            <br /><br />
            <button className="btn btn-lg btn-dark">Cadastrar</button>
            </center>

        </div>
    )
} 

export default Register; 

O erro que acontece:

TypeError: Cannot read property 'setRegister' of undefined
4
  • Batendo o olho, vejo dois erros no seu código (não sei se tem mais). 1) Register({props}) irá receber uma props com o nome props (ou seja, props.props); 2) setRegister não é o nome da props, mas sim data (o que é um nome ruim, dá uma arrumada nisso pra ficar mais fácil de ler e entender o que significa) Commented 8/06/2020 às 19:41
  • O problema aqui não tem nada a ver com o React. É o funcionamento da desestruturação no JavaScript. Commented 8/06/2020 às 19:45
  • Realmente, essa edição de props eu fiz para realizar um teste. Então assumindo que meu componente seja "Register({setRegister})" , e no componente pai eu passe dessa maneira : <Register setRegister={setRegister} />, como eu faria para acessar essa função dentro do filho?
    – Geovane
    Commented 8/06/2020 às 19:48
  • Como assim @LuizFelipe?
    – Geovane
    Commented 8/06/2020 às 19:49

1 Resposta 1

3

Antes de tudo, vale lembrar que o JSX não é nada mais que um açúcar sintático para JavaScript. Desse modo, tudo ainda pode ser representado como funções.

Portanto, quando você faz:

<Register data={setRegister} />

Você está, na verdade, invocando o método React.createElement. Assim:

React.createElement(
  Register,
  {
    data: setRegister
  }
);

Sendo o primeiro argumento o componente que você quer criar, o segundo as propriedades que você a ele quer passar e o terceiro os filhos (children). Como, no exemplo em questão, o componente não há filhos, este parâmetro foi omitido. Para saber mais, consulte a documentação.

Tendo isso em mente, é importante também estar ciente que as propriedades (o que passamos no segundo argumento para createElement) podem ser acessadas pelo primeiro parâmetro de componentes funcionais. Assim:

function Register(props) {
  console.log(props);
}

Assim, assumindo o exemplo anterior, o exemplo acima imprimiria no console do navegador { data: setRegister }. Veja:

function setRegister() {
  // Do stuff.
}

function Register(props) {
  console.log(props);
  
  return null;
}

ReactDOM.render(
  // Mesmo que:
  // <Register data={setData} />
  React.createElement(
    Register,
    {
      data: setRegister
    }
  ),
  document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Portanto, quando você desestrutura as propriedades, deste jeito:

function Register({ props }) {
  // ...
}

Você está querendo obter somente a propriedade props do objetos props que é passado ao primeiro argumento de Register pelo React. Não faz sentido, já que você nem sequer passou props para o componente Register:

<Register data={setData} />

Note que passamos data, mas não props.

Portanto, para acessar a função setData, faça:

// Note que não estamos mais desestruturando.
function Register(props) {
  console.log(props.data); // Irá imprimir a sua função.

  // Para chamar a função, faça:
  props.data();

  // ...
}

Mas perceba que esse nome data não faz sentido. Não ajuda nem a identificar o que a propriedade faz. Portanto, julgo que seria um pouco mais "agradável" renomea-lo para algo como setRegister.

Aí você fará:

function Register(props) {
  // Chamando...
  props.setRegister();

  // ...
}

<Register setRegister={setRegister} />

Leitura sugerida

2
  • Puts entendi, é que como eu sempre usei as props apenas com JSX achei que era o mesmo principio e sempre tinha que fragmentar elas, cara muito obrigado.
    – Geovane
    Commented 8/06/2020 às 20:51
  • Acontece. Há quem diga que só usar e ir entendo conforme vai usando basta. Eu pessoalmente concordo, apesar de não achar ideal. Entender um pouco de como as coisas funcionam "por baixo dos panos" – como o JSX, neste caso, pode ser bem útil às vezes. :-) Commented 8/06/2020 às 21:04

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 .