Erro de unique key ao adicionar autor | React parte 2: Validação, Rotas e Integração com API

2
respostas

por ANTONIO RICARDO MENDONCA SILVA

| 305.6k xp | 9 posts

Após enviar o autor através do formulário, ao tentar remover algum autor que foi gravado na tabela, acontece um bug e todos os autores recém enviados em memória desaparecem , não sendo possível vê-los na tabela, porém continuam persistidos no BD, sendo assim, ao recarregar a página com F5, o bug some, e tudo volta ao normal, voltando os autores na tabela. Se eu remover sem antes adicionar algum autor, funciona normalmente, e o autor é removido do BD.

Caso eu adicionar algum autor e logo em seguida recarregar a página com F5, volta a funcionar normalmente a app, sendo possível a remoção desse.

const TableBody = (props) => {
    const linhas = props.autores.map((linha) => {
        return (
            <tr key={linha.id}>
                <td>{linha.nome}</td>
                <td>{linha.livro}</td>
                <td>{linha.preco}</td>
                <td>
                    <button className="waves-effect waves-light indigo lighten-1 btn"
                        onClick={() => { props.removeAutor(linha.id) }}>Remover
                    </button>
                </td>
            </tr>
        );
    });

Acredito que o problema seja com o id do autor, já que em memória não está sendo passado o id ao submetê-lo no formulário. Gostaria de saber como resolver esse problema.

2 respostas

por Laís Cavalcanti

| 2576.8k xp | 4815 posts

Instrutor

14/05/2020

Oi, Antonio, tudo bem?

Eu testei a aplicação e não consegui ver o bug. Exatamente onde ficam os dados no BD?

por ANTONIO RICARDO MENDONCA SILVA

| 305.6k xp | 9 posts

14/05/2020

Oi Laís tudo bem?, este aqui é o meu código do submit: Obs: o bug começou a aparecer depois de implementar o tratamento de erro, como disse antes, ao add um autor no formulário, o botão de remover para de funcionar. Também fico impedido de tentar adicionar dois autores com o mesmo nome.

Aparece esse erro aqui no console: index.js:1 Warning: Each child in a list should have a unique "key" prop. Check the render method of TableBody

...

  removeAutor = id =>{
    const { autores } = this.state;

    const autoresAtualizado = autores.filter(autor =>{
      return autor.id !== id
    });

    ApiService.removeAutor(id)
      .then(res => ApiService.trataErros(res))
      .then(res => {
          if(res.message === 'deleted') {
            this.setState({autores: [...autoresAtualizado]});
            PopUp.exibeMensagem('remove', "Autor removido com sucesso");
          }
      })
      .catch(err => PopUp.exibeMensagem('error', "Erro na comunicação com a API ao tentar remover o autor"))
  } 
...
 submitListener = autor => {
    ApiService.criaAutor(autor)
      .then(res => ApiService.trataErros(res))
      .then(res => {
        if (res.message === 'success') {
          this.setState({ autores: [...this.state.autores, autor] });
          PopUp.exibeMensagem("success", "Autor adicionado com sucesso");
        }
      }).catch(err => PopUp.exibeMensagem("errorAPI", "Erro durante cmunicação com a API ao tentar criar o autor"));
  }
...

e aqui está o trecho do código da ApiService:

...
    criaAutor: autor => {
        return fetch('http://localhost:8000/api/autor', {
            method: 'POST',
            headers: { 'Access-Control-Allow-Origin': '*', 'content-type': 'application/json' },
            body: JSON.stringify(autor)
        });
    },
...
    removeAutor: (id) => {
        return fetch(`http://localhost:8000/api/autor/${id}`, {
            method: 'DELETE',
            headers: { 'content-type': 'application/json' }
        });
    },
...
    trataErros: res => {
        if (!res.ok) {
            throw Error(res.responseText);
        }
        return res.json();
    }
...