1

Como faço para atualizar o estado ?

Como faço para clicar em cadastrar e atualizar a tela na hora, e quando clicar no X ele deletar e também atualizar na hora a pagina. Não estou conseguindo, tenho que dar um atualizar na pagina manual.

Pessoal a API é um arquivo json e foi usado o json-server para simular. O exercício também precisa usar TypeScript.

segue o código.

import React, { useEffect, useRef, useState } from 'react';
import './App.css';
import axios from 'axios'

function App() {

  const [usuarios, setUsuarios] = useState<any>([])

  const inputNome = useRef<HTMLInputElement>(null)
  const inputIdade = useRef<HTMLInputElement>(null)
  const inputEmpresa = useRef<HTMLInputElement>(null)
  const inputTelefone = useRef<HTMLInputElement>(null)

  const mostraUsuarios = () => {
    axios.get("http://localhost:4000/usuarios")
      .then(resposta => setUsuarios(resposta.data))
  }

  const enviarCadastro = () => {

    const requisicao = {
      name: inputNome.current?.value,
      age: inputIdade.current?.value,
      company: inputEmpresa.current?.value,
      phone: inputTelefone.current?.value
    }

    axios.post("http://localhost:4000/usuarios", requisicao)
    mostraUsuarios()
  }

  useEffect(() => {
    mostraUsuarios()
  }, [])

  const deletarUsuario = (id: any) => {
    axios.delete(`http://localhost:4000/usuarios/${id}`)
    mostraUsuarios()
  }

  return (
    <div className="App">
      <input type="text" placeholder="Nome" ref={inputNome} />
      <input type="text" placeholder="Idade" ref={inputIdade} />
      <input type="text" placeholder="Empresa" ref={inputEmpresa} />
      <input type="text" placeholder="Telefone" ref={inputTelefone} />
      <button onClick={enviarCadastro}>Cadastrar</button>

      <br/>

      <ul>
        
        { usuarios !== null && 
          usuarios.map((item: any) => (
            <li key={item.id}>{item.name}  <button onClick={() => deletarUsuario(item.id)}>X</button></li>
          ))
        }
      </ul>
    </div>
  );
}

export default App;

8
  • o axios no enviarCadastro está sendo executado ao mesmo tempo que o axios do mostrarUsuarios precisa primeiro um depois o outro deve ser esse o seu problema a atualização na bate com o cadatro feito?
    – novic
    Commented 4/02/2021 às 20:58
  • Tudo bem Novic, então eu quero na hora que clicar em cadastro que ele mostre na tela já o nome , e quando clicar no X já delete o usuário da tela. Estou perdido como fazer isso, se você puder me ajudar, e obrigado pela dica.
    – daniel
    Commented 5/02/2021 às 0:20
  • Alguém poderia me ajudar como atualizar o estado e já mostrar ele na tela ?. Do jeito que fiz só consigo se for no botão do Google manual.
    – daniel
    Commented 7/02/2021 às 4:03
  • axios.post("http://localhost:4000/usuarios" isso retornar alguma coisa do back end?
    – novic
    Commented 7/02/2021 às 12:34
  • Tudo bem Novic. Então esse post esta adicionando na API, vamos supor vc digita um nome e quando clica em cadastrar ele adiciona na API, porem eu preciso que ele mostre na tela tb, só que não consigo. Do jeito que esta no código ai eu preciso dar um recarregar pagina no Google para aparecer.
    – daniel
    Commented 7/02/2021 às 19:47

1 Resposta 1

1

Eu gerei um exemplo mínimo e funcionou praticamente com o seu código, fiz uma alteração enviarCadastro que no momento da inserção e no seu retorno é identificado se o statusretorno 201 que diz que o registro foi criado e assim usei os dados do retorno para atualizar a lista, exemplo:

import React, { FormEvent, useEffect, useRef, useState } from 'react';
import axios from 'axios';

interface IUser {
  id?: number;
  name?: string;
  age?: number;
  company?: string;
  phone?: string;
}

function User() {
  const [usuarios, setUsuarios] = useState<IUser[]>([]);

  const inputNome = useRef<HTMLInputElement>(null);
  const inputIdade = useRef<HTMLInputElement>(null);
  const inputEmpresa = useRef<HTMLInputElement>(null);
  const inputTelefone = useRef<HTMLInputElement>(null);

  const mostraUsuarios = () => {
    axios
      .get('http://localhost:4000/usuarios')
      .then((resposta) => setUsuarios(resposta.data));
  };

  const deleteUsuario = (id?: number) => {
    axios.delete(`http://localhost:4000/usuarios/${id}`).then(() => {
      setUsuarios(usuarios.filter((x) => x.id !== id));
    });
  };

  const enviarCadastro = (e: FormEvent) => {
    e.preventDefault();
    const requisicao: IUser = {
      name: inputNome.current?.value,
      age: parseInt(inputIdade.current?.value || '0'),
      company: inputEmpresa.current?.value,
      phone: inputTelefone.current?.value,
    };
    axios
      .post('http://localhost:4000/usuarios', requisicao)
      .then((response) => {
        if (response.status === 201) {
          setUsuarios((state) => [...state, { ...response.data }]);
        }
      });
  };

  useEffect(() => {
    mostraUsuarios();
  }, []);

  return (
    <div>
      <form>
        <input type="text" placeholder="Nome" ref={inputNome} />
        <input type="text" placeholder="Idade" ref={inputIdade} />
        <input type="text" placeholder="Empresa" ref={inputEmpresa} />
        <input type="text" placeholder="Telefone" ref={inputTelefone} />
        <button onClick={enviarCadastro}>Cadastrar</button>
      </form>
      <div>
        {usuarios &&
          usuarios.map((u, i) => (
            <div key={i}>
              {u.name} - {u.company} - {u.age} - {u.phone}
              <button onClick={() => deleteUsuario(u.id)}>Excluir</button>
            </div>
          ))}
      </div>
    </div>
  );
}

export default User;
5
  • Tudo bem Novic, deu certo sim a de cadastrar e atualizar a pagina. Só não consegui fazer na de deletar , tentei usar o mesmo que você fez em cadastrar e não deu certo.
    – daniel
    Commented 8/02/2021 às 21:26
  • @daniel fiz também o excluir, vale lembrar que existem várias formas de fazer isso
    – novic
    Commented 8/02/2021 às 23:58
  • Obrigado Novic pela ajuda, me ajudou muito. Eu estou fazendo um outro projeto porem esse mexe com Redux, ele é meio grande, como faço para criar um pergunta aqui, não vou conseguir colocar todo o código aqui. A duvida é como atualizar o estado do Redux para ele renderizar a tela.
    – daniel
    Commented 9/02/2021 às 4:47
  • Crie uma outra pergunta @daniel com o mínimo possível de informação!
    – novic
    Commented 9/02/2021 às 13:35
  • Blz, obrigado pela ajuda aqui.
    – daniel
    Commented 9/02/2021 às 16:30

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 .