TypeScript不可扩展数组push问题：循环中重复添加同一条数据

1. 解决“每次添加同一条数据”的问题 #

如果newRow是在for循环外部声明的，每次循环只是修改同一个对象的属性，数组里存储的都是这个对象的引用，所以看起来每次添加的都是同一条数据。把newRow的定义放到for循环内部，每次循环创建一个全新的对象实例：

// 将newRow的声明移到for循环内部
for (/* 你的循环条件 */) {
  const newRow = {
    id: productName,
    category: category,
    value: _value.toString(),
    cheapSource: merchantName,
    cheapPrice: lowPrice,
    amazonSource: suppData[k][2]
  };
  // 后续添加到数组的逻辑
}

这样每次循环都会生成独立的对象，数组里的元素就不会重复引用同一个对象了。

2. 解决“数组不可扩展，无法使用普通push”的问题 #

当数组被标记为不可扩展（比如通过Object.freeze或运行环境限制），直接调用push会抛出错误。此时不要修改原数组，而是创建新数组替代原数组，常用两种方法：

方法一：使用扩展运算符 #

rows = [...rows, newRow];

方法二：使用concat方法 #

rows = rows.concat([newRow]);

这两种方法都会返回包含原数组元素和新元素的新数组，不会修改原数组，避开了数组不可扩展的限制。

3. 修正错误的push用法 #

你代码里的rows.push(...newRow)是错误的：展开运算符...用于数组时才会把元素逐个传给push，但newRow是对象，展开对象会把它的键名作为参数传递，导致数组被插入一堆字符串（对象的键），而非目标对象。结合数组不可扩展的情况，建议直接用上面的新数组创建方式。

额外提示：React组件状态管理 #

你的rows是在组件外部用var声明的变量，React不会监听这个变量的变化来重新渲染组件。如果需要修改rows后更新UI，应该把rows作为组件状态管理：

import { useState } from 'react';

export default function DataTable() {
  const { user } = useUser();
  // 用useState初始化状态
  const [rows, setRows] = useState([
    {
      id: '1',
      category: 'Snow',
      value: 'Jon',
      cheapSource: '35',
      cheapPrice: '35',
      amazonSource: '233'
    }
  ]);

  // 添加新行时更新状态
  const addNewRow = (newRowData) => {
    setRows(prevRows => [...prevRows, newRowData]);
  };

  // ... 其他逻辑

  return (
    // ... 组件JSX，直接使用状态中的rows变量
  );
}

这样修改rows状态后，组件会自动重新渲染，更新DataGrid的内容。

内容的提问来源于stack exchange，提问作者Ted's Projects