删除 sql 语句不起作用 - 尝试使用 recipe_id 删除配方

Question

创建DELETE 函数。 我正在删除基于其recipe_id、唯一indicator 的配方。

我注意到的问题，每当我将请求 handleDelete 发送到我的 backend 时，recipe_id 是 空 - 当然这意味着我将无法 delete食谱。

我尝试了loggin 各种各样的东西，以了解我做错了什么以及哪里出错了。到目前为止还没有找到任何东西。

Profile.js__

    handleDelete(recipe) {
        const jwt = localStorage.getItem("jwt");
        axios({
          method: "delete",
          data: {
            recipe_id: this.state.recipe_id
          },
          url: "http://localhost:4000/api/recipe",
          headers: {
            Authorization: "Bearer " + jwt
          }
        })
          .then(response => {
            this.setState({ recipe: response.data.recipe });
          })
          .catch((error, res) => {
            if (error.response.status === 401) {
              console.log("Error:", error);
            }
          });
      }

api/index.js__

    api.delete('/recipe', passport.authenticate('jwt', {session: false}), (req, res) => {
        const recipe_id = req.body.recipe_id

          db.query('DELETE FROM recipes WHERE recipe_id = ?', 
          [req.body.recipe_id], (err, results) => {
            if (err) {
              console.log("Err:", err)
          res.status(500)
          return;
        }
        db.query('SELECT * FROM recipes', (err, rows) => {
        if (err) {
          res.status(500)
          return;
            }
        res.json({recipes: rows});
    })
    })
    });

是的，缩进很烂，复制粘贴的错。

所有相关代码都可以在这里找到：https://gist.github.com/MisterSemaan/07d7cf52b0069d2ea89b29f608c2b976

Answer 1

确保您处理有关状态的所有内容均正确无误。然后我建议将 Profile.js 类更改为具有不同的渲染（我认为 Profile 组件不应该知道如何为 RecipeCard 拆分配方）

Profile.js

  <RecipeCard
     className="recipeCard"
     recipe={data}
     handleDelete={this.handleDelete.bind(this)}
  />

当然还要保留有关 handleDelete 功能的更改：

 handleDelete(recipe) {
    const jwt = localStorage.getItem("jwt");
    console.log(jwt);
    axios({
      method: "delete",
      data: {
        recipe_id: recipe.recipe_id
      },
      url: "http://localhost:4000/api/recipe",
      headers: {
        Authorization: "Bearer " + jwt
      }
    })
      .then(response => {
        console.log(response);
        if (response.status === 200) {
          console.log("Delete Success");
          window.location.reload();
        }
        this.setState({ recipe: response.data.recipe });
      })
      .catch((error, res) => {
        if (error.response.status === 401) {
          console.log("Error:", error);
          alert("Failed");
        }
      });
  }

然后在 RecipeCard.js 中尝试从完整的配方中受益

RecipeCard.js

import React from 'react';
import Button from '@material-ui/core/Button';
import { Typography } from '@material-ui/core';

export default class RecipeCard extends React.Component {

  handleUpdate(){
    if(this.props.handleUpdate){
      this.props.handleUpdate(this.props.recipe)
    }
  }
  handleDelete(){
    if(this.props.handleDelete){
      this.props.handleDelete(this.props.recipe)
    }
  }

 render(){
   const { className, recipe, onClick, image, alt } = this.props
   const { recipe_name, recipe_author, recipe_meal, recipe_description, recipe_ingredients, recipe_preparation} = recipe
  return(
    <div onClick={onClick} className={className}>
      <Typography variant="h5" gutterBottom> Name: {recipe_name} </Typography>
      <Typography variant="body1" gutterBottom> Author: {recipe_author} </Typography>
      <Typography variant="body1" gutterBottom> Meal: {recipe_meal} </Typography>
      <Typography variant="body1" gutterBottom> Description: {recipe_description} </Typography>
      <Typography variant="body1" gutterBottom> Ingredients: {recipe_ingredients} </Typography>
      <Typography variant="body1" gutterBottom> Preparation: {recipe_preparation} </Typography>
      <img src={image} alt={alt}/>
      <Button color="primary" variant="contained" onClick={(event) => this.handleDelete(event)}>Delete</Button>
    </div>
  )
 }
}

附言。如果您不打算为 RecipeCard 组件使用不同的类名，我宁愿将它嵌入到 RecipeCard 中，而不是从 Profile 传递它