push data in not extensible array js-CodePudding

im trying to array.push in a for loop in my Typescript code:

var rows = [
  {
    id: '1',
    category: 'Snow',
    value: 'Jon',
    cheapSource: '35',
    cheapPrice: '35',
    amazonSource: '233'
  }
];
    var newRow = {
          id: productName,
          category: category,
          value: _value.toString(),
          cheapSource: merchantName,
          cheapPrice: lowPrice,
          amazonSource: suppData[k][2]
        };
        rows.push(...newRow);
export default function DataTable() {
  const { user } = useUser();
  return (
    <div>
      {user ? (
        <div
          style={{
            height: 400,
            width: '75%',
            backgroundColor: 'white',
            marginLeft: 'auto',
            marginRight: 'auto',
            marginTop: '50px',
            marginBottom: '50px'
          }}
        >
          <DataGrid
            rows={rows}
            columns={columns}
            pageSize={5}
            rowsPerPageOptions={[5]}
            checkboxSelection
            onRowClick={get5CatDataNoStockCheck}
          />
        </div>
      ) : (
        <div>
          <SignIn />
        </div>
      )}
    </div>
  );
}

The problem im facing is that it always pushes the same row even if im changing is value just before?

PS: A simple array.push is not usable since the array is not "extensible"

CodePudding user response：

rows.push(...newRow);

This one line won't work to begin with. What is this trying to accomplish? - Why spread the newRow object.

With the code you provided rows.push() will work (provided the element you try to push has the correct type - you use typescript after all, so by declearing your array it will infer the type. (something like {id: string, category: string, ...}[] so if you now try to push something that is not of exactly that type typescript will not let you.

But in the code you showed us there is no reason why push() wouldn't work. From what I have got to work with I'll say that it's most likely you are trying to push the wrong type. (which causes typesript to throw an error) - and of course rows.push(...newRow); will throw an error regardless of typescript (it just doesn't work)

CodePudding user response：

you don't understand the structure of the array you created yourself, let's see the structure for the rows array, this is an array of objects:

var rows = [
  {
    id: '1',
    category: 'Snow',
    value: 'Jon',
    cheapSource: '35',
    cheapPrice: '35',
    amazonSource: '233'
  }
];

and you create a newRow variable which is an object. if you are going to add it there is no need to use the spread operator. you can just redeclare the array or you can just push into the rows array.

Way no 1 - redeclare the array

var newRow = {
    id: productName,
    category: category,
    value: _value.toString(),
    cheapSource: merchantName,
    cheapPrice: lowPrice,
    amazonSource: suppData[k][2]
};

//redeclare the array

rows = [...rows, newRow];

Way no 2 - just push into the rows array

rows.push(newRow)