在map循环中从父组件中删除子组件
在map循环中从父组件中删除子组件
提问于 2021-07-20 00:14:35
在我的父组件中，我有这样的代码，它基于ushery钩子文件生成子组件：
files.map((fl) => <AudioFileListItem key={fl.id} id={fl.id} customer_id={customer_id} name={fl.name} s3_url={fl.s3_url} />)在该子组件中，我希望能够从其父组件的文件钩子中删除自己，或者只是从呈现的文件中删除自己。
这是我在子组件中的删除函数：
const handleAudioDelete = (sound_id) => {
var data = {
"id": sound_id
};
if (window.confirm("Are you sure you want to delete this file?")) {
axios.post(`/delete-file`, data).then(function(result) {
//remove item from react list through hook
console.log(result.data);
});;
}
}知道我能做什么吗？
更新！
将其添加到父组件中，并将其传递给支柱中的子组件。它成功地更新父组件中文件的值，但它不会从视图中删除子组件。我认为这是因为所有的子组件都已经呈现，并且地图显示没有动态显示文件的值。
const handleAudioDelete = (sound_id) => {
var data = {
"id": sound_id
};
if (window.confirm("Are you sure you want to delete this file?")) {
var index = files.findIndex(function(o){
return o.id === sound_id;
})
if (index !== -1) files.splice(index, 1);
setFiles(files);
console.log(files)
}
/*
axios.post(`http://localhost:2000/files/delete-file`, data).then(function(result) {
//remove item from react list through hook
console.log(result.data);
});
*/}
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-07-20 00:21:51
假设files是状态，则使用元素id筛选状态，返回具有不匹配id属性的所有文件元素。
const handleAudioDelete = (id) => {
const data = {
id
};
if (window.confirm("Are you sure you want to delete this file?")) {
axios.post(`/delete-file`, data)
.then(function(result) {
setFiles(files => files.filter(fl => fl.id !== id));
});
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68448248
复制相关文章
相似问题
腾讯云开发者
