Bom dia galera. Estou desenvolvendo uma aplicação onde o registro do usuário é de acordo com a opção que o mesmo seleciona " Fisica ou Juridica ". De acordo com a opção que ele escolhe um form é renderizado através de functions / component, o problema é que renderizando dessa forma sempre que altero o valor de algum input, ou seja, algum Estado a pagina da um refresh. Como eu poderia tirar esse problema ?
registro.js:
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { toast, ToastContainer } from 'react-toastify';
import './register-style.css';
import 'react-toastify/dist/ReactToastify.min.css';
import api from '../../services/api';
export default function Registro() {
const [tipo, setTipo] = useState('');
const [nomerazao, setNomeRazao] = useState('');
const [cpfcnpj, setCpfCnpj] = useState('');
const [password, setPassword] = useState('');
const [email, setEmail] = useState('');
const [sexo, setSexo] = useState('');
const [status, setStatus] = useState('A');
const [endereco, setEndereco] = useState('');
const [nroendereco, setNroEndereco] = useState('');
const [bairro, setBairro] = useState('');
const [cidade, setCidade] = useState('');
const [uf, setUf] = useState('');
const [cep, setCep] = useState('');
const [ddd, setDdd] = useState('');
const [telefone, setTelefone] = useState('');
function CNPJ() {
return (
<form onSubmit={handleRegister}>
<input
placeholder="Insira sua Razão Social"
value={nomerazao}
onChange={e => setNomeRazao(e.target.value)}
/>
<input
placeholder="Insira seu CNPJ"
value={cpfcnpj}
onChange={e => setCpfCnpj(e.target.value)}
/>
<input
type="email"
placeholder="Insira seu email"
value={email}
onChange={e => setEmail(e.target.value)}
/>
<button type="submit">Cadastrar</button>
</form>
);
};
function CPF() {
return (
<form onSubmit={handleRegister}>
<input
placeholder="Insira seu Nome"
value={nomerazao}
onChange={e => setNomeRazao(e.target.value)}
/>
<input
placeholder="Insira seu CPF"
value={cpfcnpj}
onChange={e => setCpfCnpj(e.target.value)}
/>
<input
type="password"
placeholder="Insira sua senha"
value={password}
onChange={e => setPassword(e.target.value)}
/>
<input
type="email"
placeholder="Insira seu email"
value={email}
onChange={e => setEmail(e.target.value)}
/>
<button type="submit">Cadastrar</button>
</form>
);
};
function Form (){
if(tipo === '') {
return (
<div>
<span>Selecione um tipo de cadastro...</span>
</div>
)
}else if(tipo === 'F') {
return (
<div>
<CPF />
</div>
)
} else {
return (
<div>
<CNPJ />
</div>
)
}
}
return (
<div className="formulario">
<h1>Registro</h1>
<div className="botoes">
<span>Tipo de cadastro: </span>
<select value={tipo} onChange={e => setTipo(e.target.value)}>
<option disabled value="">Selecione</option>
<option value="F">Usuário</option>
<option value="J">Empresa</option>
</select>
</div>
<Form />
<Link to="/">Voltar ao Login</Link>
</div>
);
}
Função handleRegister:
async function handleRegister(e) {
e.preventDefault();
const data = ({
});
try{
await api.post('/pessoa/register', data)
.then(function(response){
if(response.status === 200){
toast.success(`${response.data.name} Seu cadastro foi realizado com sucesso !`);
// setTimeout(() =>{
// history.push('/')
// }, 3250);
}
});
} catch (err) {
if(err.response.status === 400) {
toast.error(err.response.data.error);
}
}
}
Registro
renderiza novamente?useState
) no mesmo componente, a mudança de estado do inputA
causará a renderização do componente inteiro.<Form />
poderia ser um componente diferente, visto que a sua página inteira parece ser um componente apenas. Fora isso, não vejo problemas. Se o<Form />
possuísse componentes filhos, alguns outros métodos poderiam ser utilizados para evitar a renderização dos filhos, veja essa pergunta para mais detalhes: Como usar “shouldComponentUpdate” com Hooks?