Javascript 防止组件作为数组元素在父数组更改时重新渲染

我想创建一个简单的文件上传程序，我已经有了来自dropzone拖放的文件列表

一个简单的文件循环

{listOfFiles.map((file, i) => (
  <SingleFile
    key={i}
    index={i}
    file={file}
    handleDelete={handleDelete}
  />
))}

上传过程很好&当我拖动另一个文件时，它会工作，新文件会添加到listOfFiles中，然后开始上传

现在，当我单击SingleFile中的delete按钮时，父组件上的handleDelete将触发以删除具有特定索引的文件

<button onClick={props.handleDelete(index)}> Delete </button>

现在的问题是，当我删除一个单文件时，listOfFiles数组会更新，作为单文件组件的每个数组元素都会重新呈现，并且会再次调用upload axios调用。。。等等

---

当另一个实例发生更改时，是否有任何方法不重新呈现组件的实例？在重新渲染时，是否仅取决于其状态/道具？并通过父数组中的唯一id或索引来控制其装载/卸载。

可能会重新呈现，因为每个单文件组件上的键只是listOfFiles数组中相应项的索引。React在呈现组件列表时使用键跟踪哪个项目是哪个项目。因此，如果你有：

常量列表文件=[ “文件0”， “文件1”， “文件2”， “文件3”， ] 你会有这些成分：

键只是数组中的索引。因此，如果您删除第二个元素，即索引为1的元素“file1”，那么react将认为它之后的所有元素都已更改，因为它们现在具有不同的数据。您将得到以下数组：

常量列表文件=[ “文件0”， //“file1”，//此元素已删除 “文件2”， “文件3”， ] 这些成分：

看看键1和键2现在是如何拥有file2和file3的，而之前它们拥有file1和file2？React now认为具有关键点1和2的组件已更改，并将重新渲染。此外，由于文件已更改，您的useEffect调用将再次运行

解决方案是将密钥设置为每个文件的唯一项，如果删除其中一个文件，该项不会更改。文件名可能是：

{listOfFiles.mapfile，i=> } 虽然有可能多个文件具有相同的名称，但React不允许重复密钥。一个可能更好的解决方案是添加文件上载时间戳（以微秒为单位），并将其包含在文件对象中。仍有复制的可能性，但可能性要小得多：

{listOfFiles.mapfile，i=> } 实际上，也许更好的解决方案是在上传每个文件时添加一个随机值作为唯一id。然后将该唯一id用作密钥：

{listOfFiles.mapfile，i=> } 您可能还希望自己使用该id来标识文件，而不是使用索引：

{listOfFiles.mapfile=> } 然后您的按钮和手柄将如下所示：

props.handledeletrops.id}>Delete const handleDelete=idToRemove=>{ setListOfficeListOffiles.filterf=>f.id！==idToRemove； }

---

它可能会重新呈现，因为每个SingleFile组件上的键只是listOfFiles数组中相应项的索引。React在呈现组件列表时使用键跟踪哪个项目是哪个项目。因此，如果你有：

常量列表文件=[ “文件0”， “文件1”， “文件2”， “文件3”， ] 你会有这些成分：

键只是数组中的索引。因此，如果您删除第二个元素，即索引为1的元素“file1”，那么react将认为它之后的所有元素都已更改，因为它们现在具有不同的数据。您将得到以下数组：

常量列表文件=[ “文件0”， //“file1”，//此元素已删除 “文件2”， “文件3”， ] 这些成分：

看看键1和键2现在是如何拥有file2和file3的，而之前它们拥有file1和file2？React now认为具有关键点1和2的组件已更改，并将重新渲染。此外，由于文件已更改，您的useEffect调用将再次运行

解决方案是将密钥设置为每个文件的唯一项，如果删除其中一个文件，该项不会更改。文件名可能是：

{listOfFiles.mapfile，i=> } 虽然有可能多个文件具有相同的名称，但React不允许重复密钥。一个可能更好的解决方案是添加文件上载时间戳（以微秒为单位），并将其包含在文件对象中。仍有复制的可能性，但可能性要小得多：

{listOfFiles.mapfile，i=> } 实际上，也许更好的解决方案是在上传每个文件时添加一个随机值作为唯一id。然后将该唯一id用作密钥：

{listOfFiles.mapfile，i=> } 您可能还希望自己使用该id来标识文件，而不是使用索引：

{listOfFiles.mapfile=> } 然后您的按钮和手柄将如下所示：

道具 andleDeleteprops.id}>Delete const handleDelete=idToRemove=>{ setListOfficeListOffiles.filterf=>f.id！==idToRemove； }

<button onClick={props.handleDelete(index)}> Delete </button>

setListOfFiles((listOfFiles) => listOfFiles.filter((f, i) => i !== index));