从地图循环中的父组件中删除子组件

Question

在我的父组件中，我有这段代码可以根据 usestate 挂钩文件生成子组件：

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);
      });;
    }

  }

知道我能做什么吗？

更新！

将此添加到父组件并将其传递给 prop 中的子组件。它成功地更新了父组件中文件的值，但它没有从视图中删除子组件。我相信这是因为所有的子组件都已经渲染并且地图显示没有动态显示文件的值。

  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);
  });
  */

}

Answer 1

假设files是状态，使用元素id过滤状态，return所有文件元素不匹配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));
      });
  }
}

从地图循环中的父组件中删除子组件

removing child component from parent component within map loop

javascript

parent-child

reactjs

react-hooks

use-state