Javascript REACTJS中的delete按钮，如何通过AXIOS发送值？

我希望变量“id”包含一本书的id，以便通过axios将其发送到后面。这是一个包含多本书的表，每行都有一个删除按钮，因此“id”必须包含相关行的书id。如果有人能帮我吗？ （另外，如果有人能帮助我，我如何编辑每本书的数据，以便也通过Axios发送它们？）

从“React”导入React；
从'mdbreact'导入{MDBTable，MDBTableBody，MDBTableHead，MDBCol，MDBBtn}；
导入“/mesLivres.css”；
从“axios”导入axios；
类MyBooks扩展了React.Component{
状态={
加载：对，
书籍：空，
id:“”，
错误：“”，
};
更改=异步e=>{
等待这一天({
id:e.target.value，
});
}
handleSubmit=e=>{
console.log（this.state）；
设formData=new formData（）；
formData.append（“title”，this.state.id）；
常量url=”http://localhost:8888/API/affichage/supprimer.php"
post（url、formData）
.然后（功能（响应）{
控制台日志（响应）；
警报（“书本已被删除”）；
})
.catch（（错误）=>{
if（error.response.status===403）{
console.log（错误）；
警报（“未删除”）；
}
});
设置超时（（）=>{
这是我的国家({
错误：“”，
});
}, 2000);
e、 预防默认值（）；
}
异步组件didmount（）{
常量url=”http://localhost:8888/liste_livres/liste.php";
const response=等待获取（url）；
const data=wait response.json（）；
this.setState（{books:data.results.livres，load:false}）
console.log（data.results.livres）；
}
render（）{
if（this.state.loading）{
退还费用。。。；
}
如果（！this.state.books）{
返回(
利弗雷斯酒店
你是图书馆的学生吗。
);
}
返回(
利弗雷斯酒店



你可以{这个.州.书.长度}livres dans votre bibliothèque：



乳头
导演
出动安内
版本
类型
身材
大枣
{
this.state.books.map（livre=>(
{livre.title}
{livre.author}
{livre.year}
{livre.edition}
{livre.typeBook}
{livre.status}
{livre.date}
修饰语
供给者
))
}
);
}
}
导出默认MyBooks；

使用

onClick={（）=>this.handleDelete（livre.id）}

作为删除按钮。即使我这样更改，这也不好。你有什么想法要改变吗？我只想把身份证簿发送到我的链接“supprimer.php”，除了必须使用

handleSubmit

而不是

handledelite

，我的建议“不好”是怎么回事？您是否在浏览器的控制台/网络选项卡中看到该请求？您还需要重新加载列表以实际删除图书客户端，这意味着您应该将

liste.php

代码移动到一个函数

update（）

，并从

componentDidMount

中调用该函数，然后在删除后调用。它工作正常，非常感谢！对删除按钮使用

onClick={（）=>this.handleDelete（livre.id）}

。你有什么想法要改变吗？我只想把身份证簿发送到我的链接“supprimer.php”，除了必须使用

handleSubmit

而不是

handledelite

，我的建议“不好”是怎么回事？您是否在浏览器的控制台/网络选项卡中看到该请求？您还需要重新加载列表以实际删除图书客户端，这意味着您应该将

liste.php

代码移动到一个函数

update（）

，并从

componentDidMount

中调用该函数，然后在删除后调用。它工作正常，非常感谢！

import React from 'react';
import { MDBTable, MDBTableBody, MDBTableHead, MDBCol, MDBBtn } from 'mdbreact';
import './mesLivres.css';
import axios from 'axios';

class MyBooks extends React.Component {

state = {
  loading: true,
  books: null,
  id: '',
  error: '',
};

change = async e => {
  await this.setState({
    id : e.target.value,
  });
}

handleSubmit = e => {

  console.log(this.state);
  let formData = new FormData();
  formData.append("title",this.state.id);
  const url = "http://localhost:8888/API/affichage/supprimer.php"
  axios.post(url, formData)

  .then(function(response){
    console.log(response);
    alert('book has been deleted');
  })

  .catch((error)=>{
    if (error.response.status === 403){
      console.log(error);
      alert('no deleted');
    }
  });

  setTimeout(() => {
    this.setState({
      error: '',
    });
  }, 2000);

  e.preventDefault();
}


async componentDidMount() {
  const url = "http://localhost:8888/liste_livres/liste.php";
  const response = await fetch(url);
  const data = await response.json();
  this.setState({books: data.results.livres, loading: false})
  console.log(data.results.livres);
}


render() {
  if(this.state.loading){
    return <div>chargement...</div>;
  }

  if (!this.state.books){
    return (
      <div>
        <h1 className="myBibli"> Mes livres </h1>
        <div className="noBook">
          Vous n'avez actuellement aucun livre dans votre bibliothèque.
        </div>
      </div>  
    );
  }

  return (
    <div>
      <h1 className="myBibli"> Mes livres </h1>
      <br></br>
      <h2> Vous avez {this.state.books.length} livres dans votre bibliothèque:</h2>
      <br></br>
      <MDBTable hover>
        <MDBTableHead>
          <tr>
            <th>Titre</th>
            <th>Auteur</th>
            <th>Année de sortie</th>
            <th>Edition</th>
            <th>Type</th>
            <th>Statut</th>
            <th>Date d'achat</th>
            <th></th>
            <th></th>
          </tr>
        </MDBTableHead>
        <MDBTableBody>
          {
            this.state.books.map(livre => (
              <tr key={livre.id} onChange={this.Change} >
                <td>{livre.title} </td>
                <td>{livre.author}</td>
                <td>{livre.year}</td>
                <td>{livre.edition}</td>
                <td>{livre.typeBook}</td>
                <td>{livre.status}</td>
                <td>{livre.date}</td>
                <td><MDBBtn color="dark">Modifier</MDBBtn></td>
                <td><MDBBtn type="submit" onClick={this.handleSubmit} color="dark">Supprimer</MDBBtn></td>
              </tr>
            ))
          }
        </MDBTableBody>
      </MDBTable>

    </div>
  );
}
}

export default MyBooks;