从前端到后端的前端删除请求不起作用
我的后端数据
[
{ id:1,
Name: "Isabella of Portugal",
Spouse: "Charles V",
Title: "Holy Empire Empress",
Introduction:"Isabella of Portugal (24 October 1503 – 1 May 1539) was the empress consort and queen consort of her cousin Charles V, Holy Roman Emperor, who was the ruler of the Spanish Empire. She was Queen of Spain and Germany, and Lady of the Netherlands from 10 March 1526 until her death in 1539, and became Holy Roman Empress and Queen of Italy in February 1530. She was the regent of Spain because of her husband's constant travels through Europe, ensuring that the kingdom remained independent of imperial policies[1] and economically healthy during her lifetime."
},
{ id:2,
Name: "Catalina Micaela of Spain",
Spouse: "Charles Emmanuel I",
Title: "Duchess of Savoy",
Introduction:"Catherine Michelle of Spain (Spanish: Catalina Micaela de Austria; 10 October 1567 – 6 November 1597) was Duchess of Savoy by marriage to Duke Charles Emmanuel I. She ruled the Duchy several times as regent in Charles Emmanuel's absence, notably during his campaign in 1594.[1] She was the younger surviving daughter of Philip II of Spain and Elisabeth of Valois."
},
{ id:3,
Name: "Elisabeth in Bavaria",
Spouse: "Franz Joseph I" ,
Title: "Empress of Austria",
Introduction:"Duchess Elisabeth Amalie Eugenie in Bavaria (24 December 1837 – 10 September 1898) was Empress of Austria and Queen of Hungary from her marriage to Emperor Franz Joseph I on 24 April 1854 until her assassination in 1898."
},
{ id:4,
Name:"Alexandra Feodorovna",
Spouse: "Nicholas II",
Title:"Empress of Russia",
Introduction:"Alexandra Feodorovna (6 June [O.S. 25 May] 1872 – 17 July 1918), Princess Alix of Hesse and by Rhine at birth, was the empress consort of Emperor Nicholas II from their marriage on 26 November [O.S. 14 November] 1894 until his forced abdication on 15 March [O.S. 2 March] 1917. As such, she was also the last empress consort of Russia. A favourite granddaughter of Queen Victoria of the United Kingdom, she was, like her grandmother, one of the most famous royal carriers of haemophilia and bore a haemophiliac heir, Alexei Nikolaevich, Tsarevich of Russia. Her reputation for encouraging her husband's resistance to the surrender of autocratic authority and her known faith in the Russian mystic Grigori Rasputin severely damaged her popularity and that of the Romanov monarchy in its final years.[2] She and her immediate family were all killed while in Bolshevik captivity in 1918, during the Russian Revolution. In 2000 the Russian Orthodox Church canonized her as Saint Alexandra the Passion Bearer."
},
{ id:5,
Name:"Fawzia Fuad of Egypt",
Spouse: "Mohammad Reza Pahlavi",
Title: "Queen of Iran",
Introduction:"Fawzia of Egypt (Arabic: فوزية; 5 November 1921 – 2 July 2013), also known as Fawzia Chirine, was an Egyptian princess who became Queen of Iran as the first wife of Mohammad Reza Pahlavi, Shah of Iran.\n" +
"\n" +
"Fawzia was the daughter of Fuad I, seventh son of Ismail the Magnificent. Her marriage to the Iranian Crown Prince in 1939 was a political deal: it consolidated Egyptian power and influence in the Middle East, while bringing respectability to the new Iranian regime by association with the much more prestigious Egyptian royal house. It was never a love-match, and Fawzia obtained an Egyptian divorce in 1945 (not recognised in Iran until 1948), under which their one daughter Princess Shahnaz would be brought up in Iran.\n" +
"\n" +
"In 1949, Fawzia remarried Colonel Ismail Chirine, an Egyptian diplomat, with whom she had a son and a daughter."
}
]
在server.js中删除方法
router.delete('/:id',(req,res)=>{
const found = BeautyData.some(beauty=>beauty.id === parseInt(req.params.id));
if (found){
res.json({
msg:'Beauty deleted',
BeautyData:BeautyData.filter(beauty=>beauty.id !== parseInt(req.params.id))
});
}else{
res.status(404).json({msg: `No beauty with the id ${req.params.id}`});
}
})
删除操作
const deleteBeauty = async({id})=>{
fetch('http://localhost:5000/beauty/'+id,{
method:'DELETE'
}).then(res=>res.json());
}
删除redux thunk
export const deleteBeautyAsync = createAsyncThunk(
Delete_Beauty,
async ({id}) => {
return await action.deleteBeauty(id);
}
);
<div className='dd'>
<h1> {beauty.Name}</h1>
<h1> Spouse: {beauty.Spouse}</h1>
<h1> Title: {beauty.Title}</h1>
<h4>ID: {beauty.id}</h4>
<button
onClick={()=>{
dispatch(deleteBeautyAsync(beauty.id));
console.log(beauty.id);
}}>
Delete Beauty
</button>
我在后端存储了女性数据列表,并在React Frontend上显示这些数据。成功显示数据后,我尝试创建一个删除按钮以调度调度(deleteBeautyAsync(beauty.id)),以删除带有后端列表中特定ID的数据。但是该按钮不起作用,甚至没有向我显示失败状态“ 404”。我想知道会发生什么。 PS:我已经使用Postman在server.js中检查了我的删除方法,它的工作原理很好。
My data at backend
[
{ id:1,
Name: "Isabella of Portugal",
Spouse: "Charles V",
Title: "Holy Empire Empress",
Introduction:"Isabella of Portugal (24 October 1503 – 1 May 1539) was the empress consort and queen consort of her cousin Charles V, Holy Roman Emperor, who was the ruler of the Spanish Empire. She was Queen of Spain and Germany, and Lady of the Netherlands from 10 March 1526 until her death in 1539, and became Holy Roman Empress and Queen of Italy in February 1530. She was the regent of Spain because of her husband's constant travels through Europe, ensuring that the kingdom remained independent of imperial policies[1] and economically healthy during her lifetime."
},
{ id:2,
Name: "Catalina Micaela of Spain",
Spouse: "Charles Emmanuel I",
Title: "Duchess of Savoy",
Introduction:"Catherine Michelle of Spain (Spanish: Catalina Micaela de Austria; 10 October 1567 – 6 November 1597) was Duchess of Savoy by marriage to Duke Charles Emmanuel I. She ruled the Duchy several times as regent in Charles Emmanuel's absence, notably during his campaign in 1594.[1] She was the younger surviving daughter of Philip II of Spain and Elisabeth of Valois."
},
{ id:3,
Name: "Elisabeth in Bavaria",
Spouse: "Franz Joseph I" ,
Title: "Empress of Austria",
Introduction:"Duchess Elisabeth Amalie Eugenie in Bavaria (24 December 1837 – 10 September 1898) was Empress of Austria and Queen of Hungary from her marriage to Emperor Franz Joseph I on 24 April 1854 until her assassination in 1898."
},
{ id:4,
Name:"Alexandra Feodorovna",
Spouse: "Nicholas II",
Title:"Empress of Russia",
Introduction:"Alexandra Feodorovna (6 June [O.S. 25 May] 1872 – 17 July 1918), Princess Alix of Hesse and by Rhine at birth, was the empress consort of Emperor Nicholas II from their marriage on 26 November [O.S. 14 November] 1894 until his forced abdication on 15 March [O.S. 2 March] 1917. As such, she was also the last empress consort of Russia. A favourite granddaughter of Queen Victoria of the United Kingdom, she was, like her grandmother, one of the most famous royal carriers of haemophilia and bore a haemophiliac heir, Alexei Nikolaevich, Tsarevich of Russia. Her reputation for encouraging her husband's resistance to the surrender of autocratic authority and her known faith in the Russian mystic Grigori Rasputin severely damaged her popularity and that of the Romanov monarchy in its final years.[2] She and her immediate family were all killed while in Bolshevik captivity in 1918, during the Russian Revolution. In 2000 the Russian Orthodox Church canonized her as Saint Alexandra the Passion Bearer."
},
{ id:5,
Name:"Fawzia Fuad of Egypt",
Spouse: "Mohammad Reza Pahlavi",
Title: "Queen of Iran",
Introduction:"Fawzia of Egypt (Arabic: فوزية; 5 November 1921 – 2 July 2013), also known as Fawzia Chirine, was an Egyptian princess who became Queen of Iran as the first wife of Mohammad Reza Pahlavi, Shah of Iran.\n" +
"\n" +
"Fawzia was the daughter of Fuad I, seventh son of Ismail the Magnificent. Her marriage to the Iranian Crown Prince in 1939 was a political deal: it consolidated Egyptian power and influence in the Middle East, while bringing respectability to the new Iranian regime by association with the much more prestigious Egyptian royal house. It was never a love-match, and Fawzia obtained an Egyptian divorce in 1945 (not recognised in Iran until 1948), under which their one daughter Princess Shahnaz would be brought up in Iran.\n" +
"\n" +
"In 1949, Fawzia remarried Colonel Ismail Chirine, an Egyptian diplomat, with whom she had a son and a daughter."
}
]
My delete method in server.js
router.delete('/:id',(req,res)=>{
const found = BeautyData.some(beauty=>beauty.id === parseInt(req.params.id));
if (found){
res.json({
msg:'Beauty deleted',
BeautyData:BeautyData.filter(beauty=>beauty.id !== parseInt(req.params.id))
});
}else{
res.status(404).json({msg: `No beauty with the id ${req.params.id}`});
}
})
delete action
const deleteBeauty = async({id})=>{
fetch('http://localhost:5000/beauty/'+id,{
method:'DELETE'
}).then(res=>res.json());
}
delete redux thunk
export const deleteBeautyAsync = createAsyncThunk(
Delete_Beauty,
async ({id}) => {
return await action.deleteBeauty(id);
}
);
<div className='dd'>
<h1> {beauty.Name}</h1>
<h1> Spouse: {beauty.Spouse}</h1>
<h1> Title: {beauty.Title}</h1>
<h4>ID: {beauty.id}</h4>
<button
onClick={()=>{
dispatch(deleteBeautyAsync(beauty.id));
console.log(beauty.id);
}}>
Delete Beauty
</button>
I store a list of women's data at backend and display these data on react frontend. After successfully displaying the data, I try to create a delete button to dispatch dispatch(deleteBeautyAsync(beauty.id)) in order to delete a piece of data with the specific id in the list at backend. But the button is not working, and it doesn't even show me the fail status "404" . I am wondering what happens.
PS: I've already used postman to check my delete method in server.js, it works perfectly fine.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论