Блог

Главная - Вопросы по программированию - Как разрешить перекрывающиеся данные из сопоставленных входных строк в JavaScript?

Как разрешить перекрывающиеся данные из сопоставленных входных строк в JavaScript?

#javascript #reactjs

Вопрос:

У меня есть форма реакции, которая включает в себя сбор данных из API и их обработку, я извлекаю элементы из API, затем сопоставляю их, чтобы создать форму для каждого объекта, чтобы мой пользователь мог ввести цену. Предполагается, что пользователь сможет установить цену нескольких товаров для обработки.

Моя проблема заключается в том, что из функции поиска я фильтрую объекты, чтобы реализовать функцию поиска. Однако, если я установлю цену первого товара, затем отфильтруйте список, чтобы первый товар исчез. Цена первого товара остается в первом input , поэтому цены кажутся несоответствующими.

Они не совпадают, хотя, поскольку объект, который я использую для записи данных, по-прежнему точен, он просто визуально выглядит очень запутанным.

Я воссоздал свою ошибку в этой песочнице.

Ответ №1:

Проблема в том, что вы никогда не задаете значение поля ввода цены.

 <input
  type="number"
  onChange={(e) => handleFormData(item.name, e.target.value)}
/>

Поскольку на вход не передается значение, оно потеряет свое значение, как только будет размонтировано. Вот что происходит с тобой. Когда он размонтируется, он теряет свою ценность.

Решите проблему

 <input
  type="number"
  value={formData[item.name]}
  onChange={(e) => handleFormData(item.name, e.target.value)}
/>

Но, пожалуйста, используйте уникальный идентификатор для идентификации, отличный от имени. Потому что это может привести к конфликту. И это противоречиво для sarah

кодовая ссылка — https://codesandbox.io/s/musing-satoshi-q1g52?file=/src/App.js

Комментарии:

1. Я просто попробовал это и обновил песочницу… это не сработало.

2. В коде также есть некоторые предупреждения. Я предполагаю, что вы это понимаете, и это для демонстрации. Например, ключ, значение без обмена и т. Д

3. Проблема в том, что я уже сделал это в своем реальном коде, песочница-это просто я, пытающийся воссоздать ошибку. Но, похоже, есть что-то, чего я не улавливаю.

4. Если решение не работает, то проблема может быть в идентификаторе или реализация не совпадает с песочницей

5. Да, извините, я не верю, что это ключ. Я попробовал это в песочнице. ответ @moshfiqrony сработал, но из-за размера моей фактической кодовой базы у меня возникли проблемы с ее применением.

Метки: