App.js:234 Uncaught TypeError: this.state.lista.map is not a function

Fala ai Giba, tudo bem? Ao testar sua aplicação (front e back) encontrei alguns problemas.

1. A API está subindo na mesma porta do front, no caso: 3000. Você precisa mudar para ela subir em uma porta diferente, talvez 8080.
2. No front você está chamando a API com um IP específico, porém, como tudo está rodando localmente em sua máquina, pode trocar o IP por localhost e atualizar a porta.
3. Após realizar todas as alterações, ao tentar bater na API, vai dar erro de CORS, você precisa ir na API e liberar o CORS para endereços diferentes.

Espero ter ajudado.

Matheus, atualizei a porta da API para 3333 e no front chamo http://localhost:3333/autores.

Esse esquema do CORS já funciona qndo uso IP diferente tbm, o único erro ocorre ao tentar carregar a lista dinamicamente.

atualizei no GITHUB, se vc puder dar uma olhada, o erro permanece.

Boa Giba, agora funcionou a API e não teve erro no CORS.

O problema está na sua função enviaForm, mais especificamente na função de sucesso:

enviaForm(evento){
    evento.preventDefault();
    $.ajax({
      url:"http://localhost:3333/autores",
      contentType: 'application/json',
      dataType: 'json',
      type: 'post',
      data: JSON.stringify({nome:this.state.nome,email:this.state.email,senha:this.state.senha}),
      success: function(resposta){
        this.setState({lista:resposta});
        }.bind(this),
        error: function(resposta){
          console.log("erro");
        }});
      }

Repare que você está atualizando o a lista com os dados que a API retorna, porém, a API vai retornar um objeto referente ao novo ator criado e não um array de autores.

Dessa maneira, você está substituindo o array atual de autores por um novo objeto recém criado, por isso que da o erro:

this.state.lista.map is not a function

Pois nesse momento o this.state.lista não é mais um array e sim um object, onde não existe a função map no object.

Para resolver o problema, ao atualizar a lista você precisa criar um novo array concatenando todos os autores atuais mais o novo criado:

this.setState(({ lista }) => ({
    lista: [...lista, resposta]
}));

A função enviaForm completa fica:

enviaForm(evento){
        evento.preventDefault();
        $.ajax({
          url:"http://localhost:3333/autores",
          contentType: 'application/json',
          dataType: 'json',
          type: 'post',
          data: JSON.stringify({nome:this.state.nome,email:this.state.email,senha:this.state.senha}),
          success: function(resposta){
            this.setState(({ lista }) => ({
              lista: [...lista, resposta]
            }));
            }.bind(this),
            error: function(resposta){
              console.log("erro");
            }});
          }

Isso deve resolver o problema e o novo autor deve ser adicionado na lista caso tudo dê certo na API.

Espero ter ajudado.

Obrigado Matheus, agora funcionou!! Como estou aprendendo nodejs e reactjs queria fazer tudo do zero ao invés de usar a API em Spring.

Valeu pela força!!

Magina, sempre que precisar não deixe de criar suas dúvidas.

Isso ai, continue assim, uma boa ideia fazer tudo do zero.

Abraços e bons estudos.