Как удалить элемент из массива на основе их индекса

#javascript #reactjs #typescript #next.js

Вопрос:

 const [data, setData] = useState([
{
 id: null,
 name:  null
},
{
 id: null,
 name: null
},
{
 id: 1,
 name: null
},
{
 id: 2,
 name: null
}
])

Как удалить элемент на основе индекса?

например, у меня есть два данных, и у каждого из них есть значок удаления, например

 data.map((item, idx) => {
 <label>{id: item.id}</label>
 <label>{name: item.name}</label>
 <button onClick={() => removeItem(idx)}>DELETE</button>
})

const removeItem = (index) => {
 if (data.length > 0) {
  //How to remove the data
   setData(array => data.filter((x, idx) => idx !== index);
 }
}

с моей стороны это не работает, вместо этого он удалит данные, если они не равны индексу.
он удаляет последний индекс. например, из removeItem(0) него будет удален последний индекс. как на этом зациклиться. потому что я пытаюсь удалить элемент на основе их индекса.

вот пример: https://stackblitz.com/edit/react-hooks-by-example-z5wg3z

ПРИМЕЧАНИЕ: когда я пытаюсь использовать фильтр на своей стороне, он удаляет последний индекс.

1. в этом случае я бы подошел к этой проблеме с уникальным идентификатором элемента, а не с индексом массива.

2. @gnujoow но проблема, если у них обоих один и тот же идентификатор?

3. id расшифровывается как идентификатор, идентификатор должен быть уникальным

4. @charlietfl — хорошо. но, например, все идентификаторы равны нулю и не уникальны, или, допустим, нет идентификаторов, у них есть только имена, а значения равны нулю. есть ли какой-либо другой способ удалить элемент?

Ответ №1:

Ваш код кажется нормальным. Можете ли вы попробовать это :

 const removeItem = (index) => {
 if (data.length > 0) {
  //How to remove the data
  const result = data.filter((x, i) => i !== index);
   setData(result);
  }
}

Ответ №2:

Ваш идентификатор для элементов не может быть одинаковым, идентификатор означает идентификатор, поэтому вы должны сделать его уникальным

 data.map((item, idx) => {
  return (
     <div key=`item_{idx}`>
        <label>{id: item.id}</label>
        <label>{name: item.name}</label>
        <button onClick={() => removeItem(item.id)}>DELETE</button>
     </div>
  )
 
})

const removeItem = (itemId) => {
 if (data.length > 0) {
  //How to remove the data
   setData(data => data.filter((item) => item.id !== itemId);
 }
}

Это должно заставить его работать.