无法从我的MySQL表中删除我的列。

huangapple go评论92阅读模式
英文:

Not able to delete my column from my Mysql table

问题

以下是您要求的代码部分的翻译:

// 从我的 MySQL 表中使用 axios.delete 删除数据的问题,使用 `ProjectId`(表中的ID)。
function onDeleteId(ProjectId) {
    axios.delete(`http://localhost:3060/deleteprojects/${ProjectId}`)
    getProjectList();
}

// 服务器端代码,告诉 SQL 删除具有某个 `ProjectId` 的列。
app.delete('/deleteprojects/:ProjectId', (req, res) => {
    console.log(req.params.ProjectId)
    const DELETE_TASK = `DELETE FROM newProjects WHERE ProjectId = ${req.params.ProjectId}`
    db.query(DELETE_TASK, (err, res) => {
        if (err) console.log(err)
    })
})

// 调用函数的部分,看起来我的 props 管理都正确。我是不是以错误的方式调用函数?
<button className="cross" onClick={props.ProjectId}><RxCrossCircled /></button>

请注意,代码中可能存在一些问题,例如在删除按钮的点击处理函数中,您应该使用onDeleteId函数而不是props.ProjectId。同时,还要确保您的后端服务器和前端客户端都正常运行,并且数据库中存在相应的数据。

英文:

I tried everything I think but no able to delete data from my mysql table using axios.delete with ProjectId (table ids).

Here's my code for where I declared my function, and as you can see I am passing the function through props

import React  from &quot;react&quot;;
import Projects from &quot;../Projects/Projects&quot;;
import &quot;./pluseProjects.css&quot;;
import {IoIosAddCircleOutline} from &quot;react-icons/io&quot;
import { Link } from &quot;react-router-dom&quot;;
import {BiChevronLeftCircle,BiChevronRightCircle} from &quot;react-icons/bi&quot;
import {IoRefreshCircleOutline} from &quot;react-icons/io5&quot;;

import axios from &quot;axios&quot;;


export default function PluseProjects() {
    
    const [addNewProjects, setAddNewProjects ] = React.useState(false)
    const [getQuery,setGetQuery] = React.useState({
        projectList:[]
    })
    function onStateChange() {
        setAddNewProjects(!addNewProjects)
    }
    
    function getProjectList() {
        axios.get(`http://localhost:3060/projects`)
        .then((response) =&gt; response.data)
        .then(response2 =&gt; {
            setGetQuery({projectList : response2})
        })
    }
    function onDeleteId(ProjectId) {
        axios.delete(`http://localhost:3060/deleteprojects/${ProjectId}`)
        getProjectList();
    }

    return(
        &lt;div className=&quot;Section-Projects&quot; &gt;
            
                    &lt;div className=&quot;top-projects&quot;&gt;
                    &lt;h1&gt;My Projects &lt;/h1&gt;
                    &lt;button onClick={getProjectList} className=&quot;Refresh&quot;&gt;&lt;IoRefreshCircleOutline /&gt;&lt;/button&gt;
                &lt;Link to={addNewProjects?&#39;/AddProjects&#39;:&quot;&quot;} &gt;&lt;button className=&quot;Add-newProject&quot; onClick={onStateChange}&gt;&lt;IoIosAddCircleOutline /&gt;&lt;/button&gt;&lt;/Link&gt; 
                

                    &lt;/div&gt; 
            
                &lt;div className=&quot;Projects&quot;&gt;
                    &lt;button className=&quot;arrowLeft&quot;&gt;&lt;BiChevronLeftCircle /&gt;&lt;/button&gt;
                            &lt;div className=&quot;Single&quot;&gt;
                                {getQuery.projectList.map((gettingQuery) =&gt; 
                                    &lt;Projects   
                                    onHandleDelete={onDeleteId(gettingQuery.ProjectId)}
                                    ProjectName={gettingQuery.ProjectName}
                                    Discription={gettingQuery.Discription}
                                    git={gettingQuery.git}
                                    Img={gettingQuery.Img}
                                        /&gt;
                                )}
                            &lt;/div&gt;
                        &lt;button className=&quot;arrowRight&quot;&gt;&lt;BiChevronRightCircle /&gt;&lt;/button&gt;
                    &lt;/div&gt;
                    
                &lt;/div&gt;
    )
};

Here is my server.js code - I am telling SQL to delete this column with some ProjectId:

const express = require(&#39;express&#39;);
const cors = require(&#39;cors&#39;)
const PORT = 3060;
const db  = require(&#39;./Database&#39;)

const bodyParser = require(&#39;body-parser&#39;);
const { response } = require(&#39;express&#39;);

const app = express();

app.use(cors());
app.use(bodyParser.json());

app.get(&#39;/projects&#39;, (req,res) =&gt; {
    const TASK_QUERY = `SELECT * FROM  newproject`;
    db.query(TASK_QUERY , (err, response) =&gt; {
        if(err) res.status(404).send(&#39;something is wrong&#39;)
        else res.send(response)
    })
});

app.post(&#39;/addProjects&#39;, (req,res) =&gt; {
    const ADD_QUERY = `INSERT INTO newproject (ProjectName,Discription,git,Img) VALUES(&#39;${req.body.ProjectName}&#39;,&#39;${req.body.Discription}&#39;,&#39;${req.body.git}&#39;,&#39;${req.body.Img}&#39;)`;
    db.query(ADD_QUERY, (err) =&gt; {
        if (err) console.log(err)
        else res.send(&#39;Query added successfully&#39;)
    })
} );

app.delete(&#39;/deleteprojects/:ProjectId&#39;, (req,res) =&gt; {
    console.log(req.params.ProjectId)
    const DELETE_TASK = `DELETE FROM newProjects WHERE ProjectId = ${req.params.ProjectId}`
    db.query(DELETE_TASK, (err,res) =&gt; {
        if (err) console.log(err)
    })
})

app.listen(PORT, () =&gt; {
    console.log(&#39;app is listening on port 3000&#39;)
})

And here's where I am calling my function - I think my props management is all right. Am I calling the function the wrong way?

import React from &quot;react&quot;;
import &quot;./Projects.css&quot;
import {RxCrossCircled} from &quot;react-icons/rx&quot;

export default function Projects(props) {

    return(
        &lt;div className=&quot;Project&quot; &gt;    
            &lt;div className=&quot;Image&quot;&gt;
                &lt;img src={props.Img} alt=&quot;&quot;/&gt;
                &lt;button className=&quot;cross&quot; onClick={props.ProjectId}&gt;&lt;RxCrossCircled /&gt;&lt;/button&gt;
            &lt;/div&gt;
            &lt;div className=&quot;Bottom&quot;&gt;
                &lt;h3&gt;{props.ProjectName}&lt;/h3&gt;
                &lt;p&gt;{props.Discription}&lt;/p&gt;
                &lt;a href=&quot;/&quot;&gt;{props.git}&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    )
};

答案1

得分: 1

如果您在触发该函数时(点击删除按钮等)在网络选项卡中看到了一个HTTP调用,那意味着您的前端(React部分)工作正常。此外,我清楚地看到您的server.js中的删除路由中缺少了一个res.send()语句

app.delete('/deleteprojects/:ProjectId', (req, res) => {
  console.log(req.params.ProjectId)
  const DELETE_TASK = `DELETE FROM newProjects WHERE ProjectId = ${req.params.ProjectId}`
  db.query(DELETE_TASK, (err, result) => {
    if (err) console.log(err)
    res.status(200).send({}) // 您错过了这个
  })
})
英文:

If you see a http call in the network tab when you trigger the function (clicking the delete button etc). That means your frontend(react part) is working fine. Also i clearly see that you are missing an res.send() statement in your delete route in your server.js.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

app.delete(&#39;/deleteprojects/:ProjectId&#39;, (req, res) =&gt; {
  console.log(req.params.ProjectId)
  const DELETE_TASK = `DELETE FROM newProjects WHERE ProjectId = ${req.params.ProjectId}`
  db.query(DELETE_TASK, (err, res) =&gt; {
    if (err) console.log(err)
    res.status(200).send({}) // you missed this
  })
})

<!-- end snippet -->

答案2

得分: 0

你的onHandleDelete没有在Projects组件中使用。并且ProjectId没有作为prop传递。在PluseProjects中,你立即调用了onDeleteId函数,你应该通过一个匿名函数来调用它。

PluseProjects

{
  getQuery.projectList.map((gettingQuery) => (
    <Projects
      onHandleDelete={() => onDeleteId(gettingQuery.ProjectId)} // () =>
      ProjectName={gettingQuery.ProjectName}
      Discription={gettingQuery.Discription}
      git={gettingQuery.git}
      Img={gettingQuery.Img}
    />
  ));
}

Projects

export default function Projects(props) {
  return (
    <div className="Project">
      <div className="Image">
        <img src={props.Img} alt="" />
        <button className="cross" onClick={props.onHandleDelete}> // 将 ProjectId 更改为 onHandleDelete
          <RxCrossCircled />
        </button>
      </div>
      <div className="Bottom">
        <h3>{props.ProjectName}</h3>
        <p>{props.Discription}</p>
        <a href="/">{props.git}</a>
      </div>
    </div>
  );
}
英文:

Your onHandleDelete is not being used in the Projects component. And the ProjectId is not passed as a prop. In the PluseProjects you immediately call the onDeleteId function you should call it via an anonymous function.

PluseProjects

{
  getQuery.projectList.map((gettingQuery) =&gt; (
    &lt;Projects
      onHandleDelete={() =&gt; onDeleteId(gettingQuery.ProjectId)} // () =&gt;
      ProjectName={gettingQuery.ProjectName}
      Discription={gettingQuery.Discription}
      git={gettingQuery.git}
      Img={gettingQuery.Img}
    /&gt;
  ));
}

Projects

export default function Projects(props) {
  return (
    &lt;div className=&quot;Project&quot;&gt;
      &lt;div className=&quot;Image&quot;&gt;
        &lt;img src={props.Img} alt=&quot;&quot; /&gt;
        &lt;button className=&quot;cross&quot; onClick={props.onHandleDelete}&gt; // change ProjectId to onHandleDelete
          &lt;RxCrossCircled /&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div className=&quot;Bottom&quot;&gt;
        &lt;h3&gt;{props.ProjectName}&lt;/h3&gt;
        &lt;p&gt;{props.Discription}&lt;/p&gt;
        &lt;a href=&quot;/&quot;&gt;{props.git}&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
}

huangapple
  • 本文由 发表于 2023年1月8日 18:18:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/75046980.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定