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

0
Karan Kumar 2 Мар 2021 в 14:53

1 ответ

Лучший ответ

Проблема в том, что каждый раз, когда вы создаете новый элемент, создается новая функция remove со ссылкой на это текущее состояние во времени. Когда вы создаете элемент, вы создаете jsx с remove, указывающим на эту ссылку array, определенную по времени.

Вы можете исправить это, изменив функцию remove на что-то вроде:

  const remove = (itemId) => {
    setArray(prevArr => prevArr.filter(each => each.id !== itemId))
  }

Что гарантирует, что у вас всегда будет правильная ссылка на текущее состояние.

Хотя это решает проблему, я бы посоветовал следовать инструкциям и хранить только необходимую информацию в вашем состоянии и передавать ее JSX при рендеринге при отображении:

const App = () => {
  const [array, setArray] = useState([]);
  const remove = (itemId) => {
    setArray(array.filter(each => each.id !== itemId))
  }
  const addListComponent = () => {
    let id = uuidv4();
    setArray(oldArray => [...oldArray, { id }])
  }
  return (
    <div>
      <button onClick={addListComponent}>Add ListComponent</button>
      {array.length > 0 && array.map(({ id }) => <ListComponent key={id} id={id} remove={remove}/>)}
    </div>
  )
}
2
buzatto 2 Мар 2021 в 12:24