React Typescript 点击行重复按钮复制当前行字段到后续剩余行实现问询

DevOps 小满

2026-10-5

现有代码的核心问题

版本1问题

死循环：while循环内部没有对index做自增操作，只要满足index < subjects.length的条件就会永远执行，直接导致页面卡死。
闭包陷阱：在setSubjects的函数式更新回调中，没有使用回调接收的最新状态参数s，而是直接引用了外部的subjects变量，可能拿到旧状态，导致更新不符合预期。

版本2问题

index自增时机错误：先获取了当前索引的行数据，才对index做自增，后续splice操作修改的是自增后的索引位置，相当于把当前点击行的数据错误覆盖到下下个位置，还会跳过需要修改的第一个目标行，逻辑完全错误。
闭包陷阱：和版本1一样，函数式更新内错误引用外部subjects变量，没有使用回调参数s。
阻止默认行为时机错误：event.preventDefault()写在了setSubjects的异步回调中，执行时默认事件已经触发，完全起不到作用。

修正后的实现

const repeatData = (event: SyntheticEvent, index: number) => {
  // 同步执行阻止默认行为，避免异步回调执行时事件已结束
  event.preventDefault();
  setSubjects((s) => {
    // 直接使用回调拿到的最新状态s，完全规避闭包问题
    const newState = [...s];
    const clickedRow = s[index];
    // 明确从点击行的下一行开始遍历到数组末尾
    for (let i = index + 1; i < newState.length; i++) {
      // 保留行内其他字段原有值，只覆盖指定同步字段
      newState[i] = {
        ...newState[i],
        Type: clickedRow.Type,
        Year: clickedRow.Year,
        Option: clickedRow.Option
      };
    }
    return newState;
  });
};