如何在Node.js / ReactJS中正确使用DELETE

Question

我想解释一下我今天的问题。

我认为这比平时要难，所以让我解释一下

我从这里开始得到

getRandom = async () => {
const res = await axios.get(
entrypoint + "/alluserpls"
)
this.setState({ data: res.data })
}
componentDidMount() {
this.getRandom()
}

这是我的删除方法

handleSubmit = (e) => {
e.preventDefault();
const config = {
  method: "DELETE",
  headers: {
    "Content-Type": "application/json",
  },
};
const url = entrypoint + "/alluserpls";
fetch(url, config)
  .then(res => res.json())
  .then(res => {
    if (res.error) {
      alert(res.error);
    } else {
      alert(`ajouté avec l'ID ${res}!`);
    }
  }).catch(e => {
    console.error(e);
  }).finally(() => this.setState({ redirect: true }));

}

然后我将其映射

 render() {
 let datas = this.state.data.map((datass, index) => {
 return (
     <Col sm="12" key={index}>
     <form onSubmit={this.handleSubmit}>
         <button type="submit">Delete</button>
     </form>
        <div>{datass.name}</div>
     </Col>

然后我将结果返回到我的地图上

return (
  <div>  
    {datas}
   </div>

所以工作正常，但问题是以下情况，当我只想删除1张卡时，它会删除我所有的BDD

这是我在BDD上的路线

   app.delete('/api/alluserpls', (req, res, ) => {
   const formData = req.body;
   connection.query('DELETE FROM alluserpls SET ?', formData, err => {
   if (err) {
   res.status(500).send("Erreur lors de la modification des users");
   } else {
   res.sendStatus(200);
   }
   });
   });

我希望在单击删除时，它只会删除卡，而不会删除我的所有数据库。

如何解决此问题？

Answer 1

这是一种方法，将用户的id分配给按钮id属性字段，然后与用户id调用删除API，>

handleSubmit = (e) => {
e.preventDefault();
const userIdData = { id : e.target.id};
const config = {
  method: "DELETE",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(userIdData), 
};
const url = entrypoint + "/alluserpls";
fetch(url, config)
  .then(res => res.json())
  .then(res => {
    if (res.error) {
      alert(res.error);
    } else {
      alert(`ajouté avec l'ID ${res}!`);
    }
  }).catch(e => {
    console.error(e);
  }).finally(() => this.setState({ redirect: true }));
并且在后端，您可以获取ID并仅删除特定用户

app.delete('/api/alluserpls', (req, res, ) => {
   const formData = req.body;
   const userId = req.body.id;
   const deleteQuery = `DELETE from alluserpls WHERE id = ${userId}`;
   connection.query(deleteQuery, err => {
     if (err) {
       res.status(500).send("Erreur lors de la modification des users");
      } else {
       res.sendStatus(200);
      }
   });
});