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

Posted 2023-02-22

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

【英文标题】：How to delete data from DB using React, and hitting a rest API that i created using php and mysql?

【发布时间】：2020-12-03 20:48:41

【问题描述】：

该 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 路由。

【参考方案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
    
  

【讨论】：

谢谢！ fetch 函数不起作用，因为我实际上没有创建 DELETE 方法来获取 url 中的 id，而是我必须像这样向它添加一个 body：body: JSON.stringify(ID: id)。 removeByID 是个好主意！现在它在我删除一个项目后更新:)