如何从数组中删除特定索引，然后在同一索引上插入一个新索引？

Question

I am trying to do one thing but I have 2 choices

1. Remove a specific item/index from an array and then insert a new one in that same index.
2. Do not remove the item but edit it with new data.

I have this piece of code:

const handleClick = () => {
    for (let i = 0; i < qs.length; i++) {
      if (qs[i].id === getNewQ.id) {
        const qsCopy = [...qs].filter((q) => q.id !== getNewQ.id);

        return [...qsCopy, { ...newGroup }];
      }
    }

    return [...qs];
  };

It removes the item from the array, but when it adds the new item, it adds it to the last index. But what I need, is this new item to be added to the index where the other item was removed.

Is it clear?

I created a reproducible example: https://codesandbox.io/s/pedantic-darwin-4tty0?file=/src/App.tsx:912-1171

In the sample, you will notice how the new item gets added to the last index. It needs to be as generic as possible because it is dynamic. Not all the time would be the same index.

Answer 1

Map the qs instead, and when the ID matches, return the newGroup instead of the previous item in state:

const handleClick = () => qs.map((q) => (
  q.id === getNewQ.id
    ? { ...newGroup }
    : q
));

Answer 2

To avoid iterating over the whole array use findIndex as follow

const handleClick = () => {
  const qsCopy = [...qs];
  const itemIndex = qs.findIndex(({ id }) => (id === getNewQ.id));

  if (itemIndex !== -1) {
    qsCopy[itemIndex] = { ...newGroup };
  }

  return qsCopy;
};

Answer 3

CertainPerformance provided a good solution allowing you to only foreach your array once.

Just for informations maybe would be useful for other people:

There are other ways to do it as well You could have done a find of your object and then add your properties. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find Like:

const myObject = qs.find(q => q.id === myId)

But a spread wouldn't have worked because it would create another object.

Another possibility: A findIndex and a splice if needed

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex