Как правильно использовать DELETE по идентификатору в Node.js / ReactJS - PullRequest
Новая
       36

Как правильно использовать DELETE по идентификатору в Node.js / ReactJS

0 голосов
/ 13 марта 2020

Я хотел бы объяснить мою проблему дня.

я думаю, что это сложнее, чем обычно, поэтому позвольте мне объяснить

здесь я начну с получения get 

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);
   }
   });
   });

Я хотел бы, чтобы, когда я нажимаю на удалить только удаляет карту и не всю мою базу данных.

Как я могу исправить эту проблему?

1 Ответ

1 голос
/ 13 марта 2020

Вот один из способов сделать это: назначить id пользователя для поля атрибута кнопки id, а затем вызвать API удаления с пользователем id 

handleSubmit = (e, id) => {
e.preventDefault();
const userIdData = { 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 как переменную в функцию handleSubmit 

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

, а в бэкэнде вы можете получить идентификатор и удалить только определенного пользователя 

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);
      }
   });
});
...