如何使用React从数据库中删除数据，并击中使用php和mysql创建的rest API？

如何解决如何使用React从数据库中删除数据，并击中使用php和mysql创建的rest API？

该api可以正常工作，因为我已经在邮递员中对其进行了测试，并且设法创建了前端并显示了存储在api中的所有数据，现在我想按一个按钮并删除想要的特定项。 当我按下删除按钮时，会弹出一个带有当前项目ID的警报，因此我知道传递ID并不是问题。问题是当我使用提取功能时。

这是我的api中的删除功能：

public function delete(){
        //crear query
        $query = 'DELETE FROM ' . $this->table . ' WHERE ID = :ID';
        //prepare statement
        $stmt = $this->conn->prepare($query);
        //clean data
        $this->ID = htmlspecialchars(strip_tags($this->ID));
        //bind data
        $stmt->bindParam(':ID',$this->ID);
        //execute query
        if($stmt->execute()){
            return true;
        }
        //print error if something goes wrong %s es un placeholder
        printf("Error: %s. \n",$stmt->error);          
        return false;
    }

这是反应代码（检查功能handleBorrar）：

import React from 'react';

class Pelicula extends React.Component{

    constructor(props){
        super(props);
        this.state={
          loading:true,pelicula:null,};
    }

    async handleBorrar(id) {
        alert(`hello,${id}`);
        const responseDel = await fetch(`http://localhost/APIpeliculas/api/pelicula/read.php/${id}`,{
          method: "DELETE",});
        return responseDel.json();
    }

    async componentDidMount(){
        const url = "http://localhost/APIpeliculas/api/pelicula/read.php";
        const response = await fetch(url);
        const result = await response.json();
        this.setState({pelicula:result.data,loading: false});
        document.body.style.backgroundColor = "burlywood";
    }
    
    render(){

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

        if(!this.state.pelicula){
            return <div> Sin peliculas... </div>
        }
        return(
            <div className="container">
                <div className="row">
                    {
                        this.state.pelicula.map((peli,index)=>{
                            return(                             
                                <div key = {index} className="col-sm-12 col-md-6 col-lg-4 mt-3 d-flex justify-content-center col-style">
                                    <div className="card card-style">
                                        <div className="card-body">
                                            <h5 className="card-title">{peli.Nombre}</h5>
                                            <h6 className="card-subtitle mb-2 text-muted">{peli.Categoria}</h6>
                                            <p className="card-title"> {peli.Director} </p>
                                            <button type="button" className="btn btn-labeled btn-danger"  onClick={() => this.handleBorrar(peli.ID)}> Borrar </button>
                                            <button type="button" className="btn btn-labeled btn-warning"> Editar </button>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
}

export default Pelicula;

通过从这里阅读另一个问题，我对fetch DELETE方法有了一些想法，但是我不确定它如何工作。返回的json是什么？另外，会再次响应以渲染所有内容并调用api来更新所有内容，还是我必须重新加载页面才能查看结果？

此外，我不确定是否使用了正确的网址，因为当我制作api并在邮递员中对其进行测试时，要删除该项目，我必须使用以下网址：http：// localhost / APIpeliculas / api / pelicula / delete.php，然后将ID作为JSON对象传递给正文。因此，我不确定它的工作方式，因为我的api的路由不会采用delete.php / ID路由。

解决方法

如果您使用的是RESTful API，则成功删除资源时不会出现强制性响应。当资源被删除时，您可以返回状态204，当出现问题时可以返回400个状态中的一些。有关建议，请参见此question。您甚至不需要获取请求的正文，因为无论如何您都不会使用它。

如果已从数据库中删除了一项，也可以将其从视图中删除。您可以通过刷新页面（不是一个好主意），重新加载列表或过滤数组来实现此目的，如：

  removeById = (id) => {
    this.setState((state) => ({
      pelicula: state.pelicula.filter((item) => item.id !== id)
    }));
  };

  async handleBorrar(id) {
    alert(`hello,${id}`);
    try {
      const responseDel = await fetch(
        `http://localhost/APIpeliculas/api/pelicula/read.php/${id}`,{
          method: "DELETE"
        }
      );

      if (!responseDel.ok) throw new Error("API request not ok");

      if (responseDel.status >= 400 && responseDel.status < 600) {
        throw new Error("Bad response from server");
      }

      this.removeById(id);
    } catch (error) {
      // do something with the error,maybe warn the user
    }
  }