如何在state中动态创建数组，为动态块存储独立的文件集合

核心思路是将公共state从全局单文件数组，调整为以块唯一ID为键的对象结构，每个键对应单个块的独立文件数组，既实现了块级文件隔离，又能将所有文件数据统一存入公共state管理。

1 调整公共state结构 #

将原来全局共享的文件数组state替换为对象结构：

// 原有错误结构
// const [addedFiles, setAddedFiles] = useState([])

// 修正后结构：key为块唯一ID，value为该块对应的文件数组
const [blockFiles, setBlockFiles] = useState({})

2 为每个动态块分配唯一ID #

新增动态块时生成唯一标识，同时在state中为该块初始化空文件数组：

import { v4 as uuidv4 } from 'uuid' // 也可以用时间戳+序号替代uuid

// 块列表state，存储所有动态块的基础信息
const [blocks, setBlocks] = useState([])

const addNewBlock = () => {
  const blockId = uuidv4()
  // 新增块的同时初始化对应文件存储
  setBlockFiles(prev => ({
    ...prev,
    [blockId]: []
  }))
  setBlocks(prev => [...prev, { id: blockId }])
}

3 改写单块文件添加逻辑 #

文件上传时仅修改当前块ID对应的文件数组，不会影响其他块：

const handleFileUpload = (blockId, file) => {
  setBlockFiles(prev => ({
    ...prev,
    [blockId]: [...prev[blockId], file]
  }))
}

// 渲染动态块时的示例代码
{blocks.map(block => (
  <div key={block.id} className="dynamic-block">
    <input 
      type="file" 
      onChange={e => handleFileUpload(block.id, e.target.files[0])}
    />
    {/* 仅渲染当前块对应的文件 */}
    <div className="file-list">
      {blockFiles[block.id]?.map(file => (
        <p key={file.name}>{file.name}</p>
      ))}
    </div>
  </div>
))}

4 块删除的同步处理 #

如果支持删除动态块，同步清理对应块的文件数据避免冗余：

const deleteBlock = (blockId) => {
  setBlocks(prev => prev.filter(item => item.id !== blockId))
  setBlockFiles(prev => {
    const newState = {...prev}
    delete newState[blockId]
    return newState
  })
}

你原有代码的问题是所有动态块共用同一个全局文件数组，没有做块维度的隔离，所以任意块添加文件都会修改全局数组，所有块读取到的都是同一个数组内容，才会出现所有块都展示相同文件的问题。

内容的提问来源于stack exchange，提问作者Sergey