Почему текст инпута остается в другом инпуте?

Question

Если я введу текст в инпут, затем нажму кнопку, которая должна удалить соответствующий инпут, то вроде как в стейте все удаляется и все программно вроде ровно, но текст остается в инпуте и визуально кажется, что удаляется последний инпут. Почему так? (Предполагаю, что это из-за того, что при удалении индексы пересчитываются, но как тогда решить эту проблему?) Условный код:

import React, { useState } from 'react';

export default function App() {
  const [items, setItems] = useState([1, 2, 3, 4, 5]);

  const result = items.map((item, index) => {
    return (
      <div key={index}>
        <button onClick={() => remItem(index)}>{item}</button>
        <input type="text" placeholder={index} />
      </div>
    );
  });

  function remItem(index) {
    setItems([...items.slice(0, index), ...items.slice(index + 1)]);
  }

  return <div>{result}</div>;
}

Answer 1

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

<input type="text" value={item} placeholder={item} />

Когда ты вводишь текст в инпут, это ни где не фиксируется(в стэйте) так как инпут, у тебя, не контролируемый, а значит этот текст сохраняется в dom элементе в браузере по индексу. То есть если ты удаляешь инпут с индексом 3 то на его место встает другой инпут и браузер ему присваивает это значение.

Почитай про управляемые компоненты https://ru.reactjs.org/docs/forms.html

Answer 2

Решил проблему передачей в key не index, а item, в идеале там должен передаваться уникальный id элемента массива. Таким образом пересчёт индексов после удаления никак не влияет и удаляется тот, который нужен.

БЛОГ НА HUSL

Почему текст инпута остается в другом инпуте?

Ответы (2 шт):