Как построить массив, чтобы сначала сравнить, а затем добавить ввод

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

Мой текущий код:

const [input, setInput] = useState([]) // state

const handleOnChange = (userInput) => {
    // Add the userInput the list onChange of userInput
    // Save userInput to React Hooks
    
    setInput((input) => input.concat(userInput))
    console.info(input)
  }

Здесь userInput и объект с несколькими строковыми значениями, такими как

{id: 1 , ifYes: "Do this", ifNo : "Do something else"}

и если в массиве есть элемент с идентификатором: 1, то повторное нажатие не должно добавляться в массив.

javascript arrays reactjs

20.03.2022 07:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете использовать массив find, чтобы проверить, есть ли в массиве объект с таким же идентификатором, а если нет, то вы можете добавить значение

const [input, setInput] = useState([]) // state

const handleOnChange = (userInput) => {
  // Add the userInput the list onChange of userInput
  // Save userInput to React Hooks
  const hasUserInput = input.find(userVal => userVal.id === userInput.id);
  if (!hasUserInput) {
    setInput((input) => input.concat(userInput));
    console.info(input)
  }
}

20.03.2022 07:41

Вы можете проверить, содержит ли массив элемент с идентификатором с помощью some(...).

const [input, setInput] = useState([]) // state

const handleOnChange = (userInput) => {
    // Add the userInput the list onChange of userInput
    // Save userInput to React Hooks
    if (!input.some(i => i.id === userInput.id)){
        setInput((input) => input.concat(userInput))
    }
    console.info(input)
}

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

— 20.03.2022 07:43

20.03.2022 07:41