CRUD 删除所有用户

Question

Whenever i start the project all users are deleted without the click in the start.

Function

deleteAluno = async (aluno) => {
    await axios
        .delete(url + "api/alunos/" + aluno)
        .then((response) => {
            this.getUsers();
        });
}

HTML/JSX:

{
    this.state.alunos.map((aluno) => (
        <div key={aluno.id}>{aluno.nome}
            <button type="button" onClick={this.deleteAluno(aluno.id)}>[X]</button>
        </div>
    ))
}

Answer 1

Instead of passing a function to the onClick prop, you're calling the function directly causing the delete requests to be sent during the render.

<button
  type="button"
  onClick={() => this.deleteAluno(aluno.id)}
>
  [X]
</button>