问题情况如下:
在使用的react版本如下:
客户端代码如下:
import React, { useEffect, useState } from 'react'
function Rent() {
const [list, setList] = useState([])
const getHouseList = () => {
API.get('/user/houses').then(res=>{
const { status, body } = res.data
if (status === 200) {
setList(body)
}
})
}
const deleteRent = (e, index, item) => {
e.stopPropagation()
let rent = [...list]
rent.splice(index, 1)
API.patch(`/user/houses/${item.houseCode}`,{shelf: false}).then(() => {
setList(rent)
console.log(setList(rent))
})
}
useEffect(() => {
getHouseList()
},[])
// ...
return (
<span className={styles.delete} onClick={(e)=>deleteRent(e, index, item)}><CloseCircleOutline />span>
)
// ...
}
export default Rent
后端代码如下:
//上下架房屋
shelving: async x => {
x.body = {
status: 400,
description: "请求成功",
body: null
};
let {userCode} = x.headers;
let {id} = x.params;
let {shelf} = x.request.body;
let y = await dataBash.House.houseUpdate({where: {houseCode: id, userCode: userCode.ID} }, {
lock: shelf})
if (!y) {
x.body.description = "下架失败";
} else {
x.body.status = 200;
x.body.description = "更新房屋成功"
}
}
};
客户端代码的打印结果是undifined
目前效果如下,点击项目右下角删除图标,被点击项消失,浏览器没有报错,且浏览器network里显示更新成功,状态码是200:
然而,在刷新页面或重新进入页面后,被删除的项目又重新出现,即项目没有被真正下架
尝试过的努力:
1、把客户端setList(rent)注释掉后,点击删除图标没有任何反应;
2、把客户端getHouseList()加到setList(rent)下面,目的是希望在删除项目后重新获取最新的数据,然而效果是点击删除图标,项目消失了一秒钟后又自动出现了;
3、看到后端代码里除了有houseCode外还有userCode,试过把客户端里的API.patch那一段改为API.patch(/user/houses/${item.houseCode,item.userCode}
,{shelf: false}),浏览器network里获取数据的结果是undifined
不知道是不是上面代码的问题,希望先从上面的代码找原因。请问代码有写得不对的地方吗?如何修改才能实现项目真正被下架?请在现有代码基础上展示举例说明,谢谢
该回答引用GPTᴼᴾᴱᴺᴬᴵ
从代码来看,您在前端已经成功地删除了指定项并更新了列表,但是问题可能出现在从服务器更新房屋状态上。
·
首先,我注意到您在客户端中使用了 API.patch() 方法来将房屋状态更新为 false。但是,您的服务器端代码中使用了 lock 来更新房屋状态。这可能是一个拼写错误,因此您需要将其更改为 shelf。
·
其次,我建议在客户端和服务器端之间使用一致的房屋状态属性名。在客户端代码中,您使用了 shelf 属性来表示房屋的状态,但在服务器端代码中,您使用了 lock 属性来表示房屋的状态。因此,您需要在两个地方都使用相同的属性名。
·
最后,您可以尝试在客户端中添加一些错误处理来检查是否有任何错误发生。您可以使用 catch() 方法来捕获错误并进行适当的处理。
·
修改后的客户端代码如下所示:
import React, { useEffect, useState } from 'react'
function Rent() {
const [list, setList] = useState([])
const getHouseList = () => {
API.get('/user/houses').then(res=>{
const { status, body } = res.data
if (status === 200) {
setList(body)
}
}).catch(error => {
console.log(error)
// 进行适当的错误处理
})
}
const deleteRent = (e, index, item) => {
e.stopPropagation()
let rent = [...list]
rent.splice(index, 1)
API.patch(`/user/houses/${item.houseCode}`, { shelf: false }).then(() => {
setList(rent)
}).catch(error => {
console.log(error)
// 进行适当的错误处理
})
}
useEffect(() => {
getHouseList()
},[])
// ...
return (
<span className={styles.delete} onClick={(e)=>deleteRent(e, index, item)}>
<CloseCircleOutline />
</span>
)
// ...
}
export default Rent
修改后的服务器端代码如下所示:
// 上下架房屋
shelving: async x => {
x.body = {
status: 400,
description: "请求成功",
body: null
};
let { userCode } = x.headers;
let { id } = x.params;
let { shelf } = x.request.body;
let y = await dataBash.House.houseUpdate(
{ where: { houseCode: id, userCode: userCode.ID } },
{ shelf: shelf }
);
if (!y) {
x.body.description = "下架失败";
} else {
x.body.status = 200;
x.body.description = "更新房屋成功";
}
}
我希望这些建议可以帮助您解决问题!
状态码200说明请求发送了,但是你具体看下发送的数据是什么