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

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过滤状态，返回所有不匹配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));
      });
  }
}