如何在React中单独复制嵌套数组details中的指定项？

你的核心问题是没有正确接收要复制的元素索引，且遍历逻辑错误导致复制了整个数组。以下是修正后的代码和说明：

问题分析 #

• handleDuplicate 函数未接收按钮传递的索引 i，无法定位要复制的单个对象
• 原代码用 forEach 遍历整个 details 数组，导致所有元素都被复制
• 复制对象后错误地push了原对象 el，而非新创建的独立拷贝

修正后的代码 #

const [values, setValues] = useState({
  id: 0,
  date: new Date(), 
  address: '',
  recipient: '',
  comment: '',
  details: [{
    category: '',
    comment: '',
    term: new Date(),
    priority: '',
    status: '',
    status_comment: '',
  }]
})

// 接收要复制的元素索引i
const handleDuplicate = (e, i) => {
  e.preventDefault();
  // 复制状态对象，同时对details数组做浅拷贝，遵循React不可变原则
  const newValues = {
    ...values,
    details: [...values.details]
  };
  // 对目标元素做深拷贝，避免新元素与原元素共享引用
  const targetItem = {...newValues.details[i]};
  // 可选：如果需要重置复制后的字段（比如日期），可在此修改
  // targetItem.term = new Date();
  // 将新元素添加到数组末尾
  newValues.details.push(targetItem);
  // 更新状态
  setValues(newValues);
}

// 渲染部分修复JSX语法问题
{values.details.map((value, i) => (
  <React.Fragment key={i}>
    <TableCell>
      <TextField
        name='priority'
        onChange={e => handleDetailChange(e, i)}
        value={values.details[i].priority}
        disabled={isDisabled}
      />
    </TableCell>
    <TableCell>
      <IconButton
        disabled={isDisabled}
        onClick={e => handleDuplicate(e, i)}
      >
        <ContentCopyIcon/>
      </IconButton>
    </TableCell>
  </React.Fragment>
))}

关键修正点 #

• 让 handleDuplicate 接收按钮传递的索引 i，精准定位要复制的元素
• 对 details 数组做浅拷贝（[...values.details]），避免直接修改原状态数组
• 对目标元素做对象展开拷贝（{...newValues.details[i]}），保证新元素是独立对象
• 渲染部分补充 key 和 React.Fragment，修复JSX语法错误

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