反应钩子中删除后数据未刷新
2020-06-05
1825
删除记录后,玩家数据仍显示在主屏幕中,并且未刷新。 只有在导航到其他屏幕后,我才能在主屏幕中看到更新的数据。
我尝试将
setSearchResults(searchResults)
状态放在
onDelete()
中,但它不起作用。
Home.js
以下是在主屏幕中显示玩家数据的获取方法:
const [playerList, setPlayerList] = useState([]);
const [searchResults, setSearchResults] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
const res = await Axios.get('http://localhost:8000/service/players');
if (isMounted.current) {
setPlayerList(res.data.players);
setSearchResults(res.data.players);
const privilege = localStorage.getItem('Privilege');
console.log("What is getting in Front End:" + privilege);
showDeleteIcon(privilege);
}
} catch (e) {
console.log(e);
}
}
fetchData();
}, []);
const onDelete = id => () => {
try {
Axios.delete('http://localhost:8000/service/player', {
headers: {
'Content-Type': 'application/json'
},
data: {
'id' : id
}
});
setDeleteDialog(false);
//setSearchResults(searchResults);
//setPlayerList(playerList);
} catch (e) {
console.log(e);
}
}
server.js
app.delete('/service/player', async (req, res) => {
try {
const userId = req.body.id;
console.log("Req"+userId);
const deletePlayer = await UserModel.destroy({
where:{ id : userId }
})
res.status(200).json({ deletePlayer });
} catch (e) {
res.status(500).json({ fail: e.message });
}
});
1个回答
假设删除的记录实际上是
searchResults
状态的一部分,该状态定义为
Home.js
组件的一部分,则您需要在
Axios.delete
请求成功后更新状态。这可以通过过滤(使用
Array.filter
)与
id
不匹配的其他结果来完成。
我不确定
searchResults
的确切结构,但我假设
id
(传递给
onDelete
方法的参数)是
searchResults
数组中每个对象的唯一属性之一。
const onDelete = id => () => {
try {
Axios.delete('http://localhost:8000/service/player', {
headers: {
'Content-Type': 'application/json'
},
data: {
'id' : id
}
});
setDeleteDialog(false);
const remainingResults = searchResults.filter((result) => result.id !== id)
setSearchResults(remainingResults);
} catch (e) {
console.log(e);
}
}
wentjun
2020-06-05