Estou fazendo um post na minha API e quero atualizar a minha lista de livros sempre que eu criar um novo livro. O meu Post está funcionando, porém quando eu adiciono a minha "lista" dentro do [lista] no use useEffects um Loop é iniciado e a aplicação não para de gerar requisições. A minha lista é atualizada, mas o Loop não termina.
Gostaria de saber o motivo disso e uma forma de resolver. Obrigado!
import React, { useEffect, useState } from "react";
import api from "../../services/api";
function ListaLivros() {
const [lista, setLivros] = useState([])
const novo_livro = {
nome: "Toquinho Book",
valor: 120,
descricao: "A Saga de um Desenvolvedor Desesperado",
produto: "livro"
}
useEffect(() => {
api.get("/lista_livros").then(({ data }) => {
setLivros(data);
console.log(data);
})
}, [lista]);
function addLivro() {
api.post("/lista_livros", novo_livro)
}
return (
<>
<section>
<div className="form ">
<input type="text" className="input" />
<button className="btn btn-primary" onClick={() => addLivro()}>Adicionar Um Novo Livro</button>
</div>
</section>
<section>
<table className="table">
<thead className="thead-dark">
<tr>
<th scope="col">Id</th>
<th scope="col">Nome do Livro</th>
<th scope="col">Valor</th>
<th scope="col">Descrição</th>
<th scope="col">Produto</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
{
lista?.map((lista) => (
<tbody>
<tr>
<th key={lista.id}>{lista.id}</th>
<td>{lista.nome}</td>
<td>{lista.valor}</td>
<td>{lista.descricao}</td>
<td>{lista.produto}</td>
<td><button className="btn btn-warning">Editar</button></td>
<td><button className="btn btn-danger">Excluir</button></td>
</tr>
</tbody>
))
}
</table>
</section>
</>
);
};
export default ListaLivros;