#javascript #reactjs
Вопрос:
У меня есть массив строк в качестве моих данных. Я хочу преобразовать этот массив в объект, чтобы я мог отобразить список текстовых полей. Я хочу избежать использования индекса в map() для заполнения ключей. Я попытался использовать вместо этого UUIDv4, но понял, что каждый раз, когда я пишу что-то в одном из текстовых полей, компонент повторно отправляется, и это мешает пользователю вводить текст в текстовое поле, потому что компонент был повторно отправлен, потому что ключ был изменен в компоненте, что вызывает повторное отправление.
Есть ли способ создать объект из массива в React, чтобы при вводе каждого текстового поля, удалении или добавлении нового текстового поля в массив и объект идентификаторы оставались прежними?
Причина, по которой UUID не работал, заключается в том, что UUID дает мне новый ключ каждый раз при повторной отправке страницы
У меня есть массив
"[note 1, note 2]"
Что я хочу преобразовать в объект и не повторять идентификатор каждый раз
"[{id: 981, text: "note 1"}, {id: 452, text: "note 2" }]"
В настоящее время я просматриваю объект, и отображаются текстовые поля. У меня уже есть написанные функции для добавления нового текстового поля и удаления определенного текстового поля.
Моя главная цель-не допустить повторных отправок, когда я что — то набираю в любом из текстовых полей.
Спасибо, что нашли время прочитать мой вопрос!
Комментарии:
1. Я бы предположил, что именно это мешает вам печатать, а не изменение клавиши. Даже с тем же ключом, если значение, которое вы задаете для ввода, изменилось, React отправит его повторно. Подумайте о том, чтобы не использовать обработчик изменений, возможно, вместо этого онблур, если вам нужно проверить значение и т. Д.
2. @pilchard спасибо за ваш ответ. Onblur, похоже, помогает с аспектом набора текста. Похоже, что состояние обновит текст, который у меня есть в текстовом поле, только когда я покину текстовое поле, которое я пишу. Очевидно, что именно так работает onBlur. Есть ли в любом случае возможность удалить состояние из текстового поля при вводе текста без необходимости нажимать на другое текстовое поле, чтобы вызвать обработчик в onBlur?
3. У меня есть еще один компонент, в котором я хочу отобразить список всего текста во всех текстовых полях. В идеале хотелось бы, чтобы это происходило в реальном времени. onBlur, похоже, позволяет мне постоянно вводить текстовое поле сейчас, что здорово, но теперь не позволяет мне, чтобы мой другой компонент знал о тексте в реальном времени, который пишется в моих текстовых полях
4. Вы устанавливаете a
valueв своем текстовом поле? у вас все еще может быть обработчик onchange, если вы не используете состояние для установки значения самого текстового поля, таким образом, вы можете обновить состояние и использовать его в другом месте без повторной отправки входных данных. Вы все еще можете установить начальное значение, используяdefaultValue={note.text}раздел » Неконтролируемые компоненты».5. @pilchard в моем текстовом поле был обмен, который поднимает состояние до родительского, а затем родитель отправляет новое состояние обратно дочернему, и каждое текстовое поле имеет значение состояния[индекс]
Ответ №1:
Чтобы получить массив объектов, как в вашем примере, вы можете отобразить массив строк в массив объектов.
let arr = ["note 1","note 2"];
let objArray = arr.map((arrEl, index) => {return {id: (Math.random() index).toString(), text: arrEl}});
console.log(objArray);