-1

Estou com um problema em uma aplicação React. Sempre que eu ativo o onBlur={}, ocorre o erro TypeError: Cannot read property 'valido' of undefined'. Como posso resolver?

Código do CadastroClientes.jsx

import React, { useState } from "react";
import "./CadastroClientes.css";
import {
  Button,
  TextField
} from "@material-ui/core";

function CadastroClientes({ enviarCliente, validarNomeEmpresa, validarNomePonto }) {

    const data = ['Ativo', 'Inativo']

  const [nomeEmpresa, setNomeEmpresa] = useState("");
  const [nomePonto, setNomePonto] = useState("");
  const [codigo, setCodigo] = useState("");
  const [descricaoSICP, setDescricaoSICP] = useState("");
  const [status, setStatus] = useState("Ativo");
  const [pais, setPais] = useState("");
  const [estado, setEstado] = useState("");
  const [cidade, setCidade] = useState("");
  const [bairro, setBairro] = useState("");
  const [endereco, setEndereco] = useState("");
  const [lat, setLat] = useState("");
  const [long, setLong] = useState("");
  const [erros, setErros] = useState({nomeEmpresa: {valido: true, texto: ""}, nomePonto: {valido: false, texto: ""}, codigo: {valido: true, texto: ""}, descricaoSICP: {valido: true, texto: ""}, estado: {valido: true, texto: ""}, cidade: {valido: true, texto: ""}, bairro: {valido: true, texto: ""}, endereco: {valido: true, texto: ""}, lat: {valido: true, texto: ""}, long: {valido: true, texto: ""}});

  return (
    <div className="container">
      <form
        onSubmit={(event) => {
            enviarCliente({nomeEmpresa, nomePonto, codigo, descricaoSICP, status, pais, estado, cidade, bairro, endereco, lat, long});
            event.preventDefault();
        }}
      >
        <h1>Cadastro de Clientes</h1>
        <TextField
          value={nomeEmpresa}
          onBlur={(event) => {
              const ehValido = validarNomeEmpresa(nomeEmpresa);
              setErros({nomeEmpresa: ehValido});
          }}
          onChange={(event) => {
            setNomeEmpresa(event.target.value);
          }}
          color="primary"
          variant="outlined"
          margin="normal"
          id="nomeEmpresa"
          error={!erros.nomeEmpresa.valido}
          helperText={erros.nomeEmpresa.texto}
          label='Nome Empresa'
          fullWidth
        />
        <div className="flex">
          <TextField
            value={nomePonto}
            onBlur={(event) => {
              const isValid = validarNomePonto(nomePonto);
              setErros({nomePonto: isValid});
            }}
            onChange={(event) => {
              setNomePonto(event.target.value);
            }}
            color="primary"
            variant="outlined"
            margin="normal"
            id="nomePonto"
            error={!erros.nomePonto.valido}
            helperText={erros.nomePonto.texto}
            label="Nome do Ponto"
            className="w50"
          />
          <TextField
            value={codigo}
            onChange={(event) => {
              setCodigo(event.target.value);
            }}
            color="primary"
            variant="outlined"
            margin="normal"
            id="codigo"
            label="Código"
            className="w50"
          />
        </div>
        <TextField
          value={descricaoSICP}
          onChange={(event) => {
            setDescricaoSICP(event.target.value);
          }}
          color="primary"
          variant="outlined"
          margin="normal"
          id="descricaoSICP"
          label="Descrição SICP"
          fullWidth
        />

        <label for="exampleFormControlSelect1">Status</label>
        <select value={status} onChange={(event) => {
            setStatus(event.target.value)
        }} class="form-control" id="exampleFormControlSelect1">
            {
                data.map(i => (
                    <option>{i}</option>
                ))
            }
        </select>
        {/* Localização */}

        <h2>Localização</h2>

        <TextField
          value={pais}
          onChange={(event) => {
            setPais(event.target.value);
          }}
          color="primary"
          variant="outlined"
          margin="normal"
          id="pais"
          label="País"
          fullWidth
        />

        <div className="flex">
          <TextField
            value={estado}
            onChange={(event) => {
              setEstado(event.target.value);
            }}
            color="primary"
            variant="outlined"
            margin="normal"
            id="estado"
            label="Estado"
            className="w50"
          />
          <TextField
            value={cidade}
            onChange={(event) => {
              setCidade(event.target.value);
            }}
            color="primary"
            variant="outlined"
            margin="normal"
            id="cidade"
            label="Cidade"
            className="w50"
          />
        </div>
        <TextField
          value={bairro}
          onChange={(event) => {
            setBairro(event.target.value);
          }}
          color="primary"
          variant="outlined"
          margin="normal"
          id="bairro"
          label="Bairro"
          fullWidth
        />
        <TextField
          value={endereco}
          onChange={(event) => {
            setEndereco(event.target.value);
          }}
          color="primary"
          variant="outlined"
          margin="normal"
          id="endereco"
          label="Endereço"
          fullWidth
        />
        <div className="flex">
          <TextField
            value={lat}
            onChange={(event) => {
              setLat(event.target.value);
            }}
            color="primary"
            variant="outlined"
            margin="normal"
            id="lat"
            label="Latitude"
            className="w50"
          />
          <TextField
            value={long}
            onChange={(event) => {
              setLong(event.target.value);
            }}
            color="primary"
            variant="outlined"
            margin="normal"
            id="long"
            label="Longitude"
            className="w50"
          />
        </div>
        <Button type="submit" id="buttonCadastro" variant="contained" color="primary">Cadastrar Cliente</Button>
      </form>
    </div>
  );
}

export default CadastroClientes;

0

1 Resposta 1

1

O useState de um componente funcional não funciona do mesmo jeito que o setState de um componente classe.

Citando a documentação sobre Componentes Classe (setState):

Quando você chama setState(), o React mescla o objeto que você fornece ao state atual.

Citando a documentação sobre Componentes Funcionais (useState):

(...) diferente de this.setState em classe, ao atualizar uma variável de state, ela sempre é substituida ao invés de incorporada.

Como o useState não mescla o estado atual com o novo valor, você deve fazer isso por conta própria. No exemplo abaixo faço uso do spread operator para facilitar essa mesclagem, além de corrigir o objeto nomeEmpresa, que na inicialização do estado você declarou nomeEmpresa: {valido: true, texto: ""} mas acabou tentando substituir por nomeEmpresa: ehValido no onBlur.

setErros({ ...erros, nomeEmpresa: { ...erros.nomeEmpresa, valido: ehValido } });

Isto faz com que o estado antigo seja copiado para o novo estado, mas com um novo valor para valido.


Segue abaixo um exemplo do uso de useState no qual é possível verificar o comportamento padrão e o comportamento com o spread operator.

function App() {
  const [data, setData] = React.useState({ alpha: 1, beta: 2 });

  function setOriginalState() {
    setData({ alpha: 1, beta: 2 });
  }

  function updateState() {
    setData({ charlie: 3 });
  }

  function updateStateSpread() {
    setData({ ...data, delta: 4 });
  }

  return (
    <div>
      <h1>Usando useState</h1>
      <h2>Estado: {JSON.stringify(data)}</h2>
      <button onClick={setOriginalState}>Retornar ao estado original</button>
      <br />
      <br />
      <button onClick={updateState}>
        Mudar estado com setData({"{ charlie: 3 }"})
      </button>
      <br />
      <br />
      <button onClick={updateStateSpread}>
        Mudar estado com setData({"{ ...data, delta: 4 }"})
      </button>
    </div>
  );
}

ReactDOM.render( <App /> , document.querySelector("#app"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

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

6
  • 1
    resposta estranha, porque useState também tem como mesclar! ou não como você disse? só se entendi errado, e setState e this.seState não são a mesma coisa? Eu consigo fazer a mesma coisa nas duas formas tanto Component como function Component ... ! não entendi mesmo a sua resposta.
    – novic
    Commented 8/11/2020 às 17:59
  • @novic editei a resposta para deixar mais claro o que quis dizer. O useState e setState possuem comportamentos diferentes conforme explicado na resposta, na documentação e conforme pode ser verificado neste exemplo que acabei de criar. É possível mesclar sim, como o fiz com o spread operator, mas não é o comportamento padrão. Commented 8/11/2020 às 18:59
  • Obrigado pela resposta! Mas eu ainda não entendi o que tem que ser alterado no meu código.
    – Jaburu
    Commented 8/11/2020 às 20:00
  • @Jaburu Seus setErros dentro dos onBlur... Precisam mesclar o estado antigo com o novo (como no código da resposta) ao invés de apenas substituir o estado (como no seu código). Ênfase no ...erros Commented 8/11/2020 às 20:15
  • Eu fiz isso e não funfou ☹
    – Jaburu
    Commented 8/11/2020 às 20:50

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