Почему не работает удаление из массива?

@Bivis3000 · Регистрация: 04.02.2020

Author24 — интернет-сервис помощи студентам

При удалении элемента из массива, почему-то всегда удаляется последний элемент. Пробовал разными способами: фильтром и через slice. Никак не могу понять почему так происходит.

Parent component

Javascript

import { useState } from "react";
import "./styles.css";
import TableRow from "./TableRow";
export default function App() {
  const [row, setRow] = useState([]);
  const deleteRow = (index) => {
    const newArray = [...row.slice(0, index), ...row.slice(index + 1)];
    setRow(newArray);
  };
  const addRow = () => {
    setRow([...row, <TableRow />]);
  };
 
  return (
    <div className="app">
      <div>
        <table>
          <thead>
            <tr>
              <th>ФИО</th>
              <th>Должность</th>
              <th>Возраст</th>
              <th>Компетенции</th>
              <th> </th>
            </tr>
          </thead>
 
          <tbody>
            {row.map((item, index) => (
              <TableRow
                deleteRow={deleteRow}
                index={index}
                key={index}
                item={item}
              />
            ))}
          </tbody>
        </table>
        <div className="container">
          <div onClick={addRow}>Добавить</div>
        </div>
      </div>
    </div>
  );
}

child component

Javascript

import "./styles.css";
 
const TableRow = ({ deleteRow, index }) => {
  return (
    <tr>
      <td>
        <input name="name" type="text" placeholder="dasda" />
      </td>
      <td>
        <select name="select">
          <option value="analyst">Аналитик</option>
          <option value="manager">Менеджер</option>
          <option value="programmer">Программист</option>
          <option value="lawyer">Юрист</option>
        </select>
      </td>
      <td>
        <input name="age" type="number" placeholder="asdadsa" />
      </td>
      <td>
        <textarea
          name=""
          id=""
          cols="25"
          rows="3"
          style={{ resize: "none" }}
        ></textarea>
      </td>
      <td className="delete-row" onClick={() => deleteRow(index)}>
        {" "}
        удалить{" "}
      </td>
    </tr>
  );
};
 
export default TableRow;

CSS

.header {
  text-align: center;
  margin-bottom: 50px;
  margin-top: 10px;
}
 
.header__input {
  padding: 3px 0 3px 20px;
}
 
.container {
  width: 70%;
  display: flex;
  justify-content: space-around;
  cursor: pointer;
}
 
table {
  margin-bottom: 10px;
  width: 70%;
  border: 1px solid black;
  border-collapse: collapse;
  position: relative;
}
 
table thead th {
  padding: 10px 0;
  border-left: 1px solid black;
}
 
table td {
  text-align: center;
}
 
table tbody td {
  border: 1px solid black;
  vertical-align: top;
  padding: 5px;
}
 
table tbody tr {
  position: relative;
}
 
table tbody tr {
  position: relative;
}
 
table tbody tr td:last-child {
  border: none;
}
 
.delete-row {
  position: absolute;
  content: "-";
  top: 30%;
  right: -10%;
  cursor: pointer;
}

@mr_dramm · 21.07.2022, 00:30

Сообщение от Bivis3000

почему-то всегда удаляется последний элемент.

учитывая что вы везде работаете с индексами, у вас просто массив становится на один элемент короче, и не важно что вы удалил элемент в начале или в конце

и в TableRow вы также передаете index, а item просто не используется

Javascript

1	TableRow = ({ deleteRow, index })

а индексы у массивов всегда последовательные нельзя удалить индекс

Javascript

const row = Array.from(Array(4), (x, index) => index + 1) //[ 1, 2, 3, 4 ]
const deleteRow = (index) => {
 
    const newArray = [...row.slice(0, index), ...row.slice(index + 1)];
    // состояние до удаления 
    console.log(row) //[ 1, 2, 3, 4 ] - это значения элементов массива, у значений есть индексы которые начинаются с 0 и идут всегда последовательно, т.е. значения индексов такие [ 0, 1, 2, 3 ]
    // используем item
    console.log(newArray.reduce((arr, item) => (arr.push(item), arr), [])) // [ 1, 3, 4 ] - тут видно удалил элемент под индексом 1 со значением 2
    // используем index
    console.log(newArray.reduce((arr, _, index) => (arr.push(index), arr), [])) // [ 0, 1, 2 ] - тут видно как индексы всегда последовательно возрастают, и в данном случае кажется что мы удаляем последний элемент, хотя на самом деле мы удалили элемент с индексом 1
};
deleteRow(1)

	21.07.2022, 00:30

Почему не работает удаление из массива?

Решение