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

Question

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

这是我的 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 来更新所有内容，还是我必须重新加载页面才能看到结果？

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

Answer 1

如果您使用的是 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
    }
  }