0

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

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>;
}
2
  • напиши как в итоге должно работать 6 сен 2021 в 8:47
  • Например, если я в третьем инпуте пишу текст, потом удаляю этот инпут, то должен удалиться этот третий инпут вместе с тектом, который я туда вводил. А получается, что текст остается все равно, как будто удаляется последний инпут. Попробуйте скопировать в песочницу код, набрать текст в не последний инпут и удалить его, сразу увидите в чем проблема) 6 сен 2021 в 10:24

2 ответа 2

0

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

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

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

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

0

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.