从状态数组中删除对象 我正在实现一个图像上传器的删除功能。我的错误消息是无法读取未定义的属性“id”。我认为我没有正确分配id，我的方法对手头的任务是错误的 尝试将对象传递到函数中，并使用JavaScripts delete API删除特定文件。最好的做法不是直接修改状态，而是复制状态，修改然后粘贴新状态 尝试使用名称作为标识符，但不起作用。建议使用id或密钥删除 import*作为“React”中的React 从“react Dropzone”导入Dropzone，{DropFilesEventHandler} 从“组件/FaIcon”导入FaIcon 从“组件/按钮”导入{PrimaryButton} 接口ImageFile扩展文件{ 预览？：字符串 有吗 } 类ImageUpload扩展了React.Component{ 状态={ 文件：[] } onDrop:DropFileEventHandler=（文件：ImageFile[]）=>{ file.map（file=>Object.assign（file{ 预览：URL.createObjectURL（文件） })) this.setState（{files:[…this.state.files，…files]}） } deleteImage=（文件：ImageFile，索引：number）=>{ console.log（文件、索引） //这是我的国家({ //文件：this.state.files.filter（file=>file.name！==file）， // }); } render（）{ const files=this.state.files.map（（文件：ImageFile，索引：number）=>( console.log（文件）， ( this.deleteImage（文件、索引）}> ) )) 返回( 上传图像 {files} 类别 this.categoryInputValue（e）} /> 上传 ) } } 导出默认图像上载

我希望从数组中删除该文件。实际结果是什么也没有发生，并显示错误消息

deleteImage = (file_id) => {
  const { files } = this.state;
  this.setState({
    files: files.filter(file => file.id !== file_id),
  });
}

您应该在将文件id传递到deleteImage函数时写入此项

---

您应该在将文件id传递到deleteImage函数时写入此命令。

您可以删除具有索引值的对象

deleteImage = (file, index) => {

    const myNewFiles = [...this.state.files]; // copy of Original State
    myNewFiles.splice(index, 1);
    this.setState({
      files: myNewFiles
    });
  };

我还制作了一个沙箱示例

---

您可以删除具有索引值的对象

deleteImage = (file, index) => {

    const myNewFiles = [...this.state.files]; // copy of Original State
    myNewFiles.splice(index, 1);
    this.setState({
      files: myNewFiles
    });
  };

我还制作了一个沙箱示例

---

为什么不使用

setState

删除元素？您没有更新状态。您应该

筛选出与id匹配的对象，并在该筛选数组上使用
setState
。为什么不使用
setState
删除元素？您没有更新状态。您应该
filter
筛选出与id匹配的对象，在过滤后的数组上使用
setState
。我的文件没有id。我不确定应该如何分配id。哦，你改变了问题。无论如何，您可以使用索引来删除。我的文件没有id。不确定我应该如何分配id。哦，您更改了问题。无论如何，您可以使用索引删除。谢谢！这就是我一直在寻找的方法。实际上，我刚刚添加了react uid，以配合分配id并按id删除它的方法，尽管我开始收到错误消息“无法读取”或“从不”。非常感谢您抽出时间回复！谢谢这就是我一直在寻找的方法。实际上，我刚刚添加了react uid，以配合分配id并按id删除它的方法，尽管我开始收到错误消息“无法读取”或“从不”。非常感谢您抽出时间回复！