Условное добавление уникальных элементов в массив внутри функции ReactJS

У меня есть приложение для реагирования, к которому к комментарию можно прикрепить смайлы.

Я создал функцию, которая создает массив смайлов и устанавливает их в состояние.

У каждого объекта эмодзи есть идентификатор (имя эмодзи), счетчик (сколько раз он был добавлен и автор (имя пользователя, если пользователь, добавивший эмодзи).

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

addEmoji = (newEmoji) =>{
// mark if new emoji is already in the array or not
let containsNewEmoji = false;

// recreate emojis array
let newEmojis = this.state.emojis.map(emoji => {

  // if emoji already there, simply increment count
  if (emoji.id === newEmoji.id) {

    if ([...emoji.authors].indexOf(this.props.comment.author.name)){ // here I'm making a conditional check to see, of the author already is added

    }

containsNewEmoji = true;
return { 
  ...newEmoji,
  ...emoji,
  count: emoji.count + 1,
  authors: [...emoji.authors, this.props.comment.author.name]
};

}

но мне нужно вернуть все остальное снова

  return { 
  ...newEmoji,
  ...emoji,
  count: emoji.count + 1,
  authors: [...emoji.authors]
};

}

это кажется избыточным, можно ли улучшить эту логику?

Обновлено: Моя идея или решение на данный момент состоит в том, чтобы сделать еще одно предложение, в котором я возвращаю только массив, если внутри массива есть повторяющийся элемент авторов:

  if (emoji.id === newEmoji.id) {

let author = this.props.comment.author.name;
if ([...emoji.authors].indexOf(author) !== -1){
  containsNewEmoji = true;
  return { 
    ...emoji,
    count: emoji.count + 1,
    authors: [...emoji.authors]
  };
}
containsNewEmoji = true;
return { 
  ...emoji,
  count: emoji.count + 1,
  authors: [...emoji.authors, author]
};

Возврат newEmoji является избыточным, поскольку вы все равно перезаписываете все поля с помощью ...emoji.

Agney 08.12.2018 18:32

ты прав! спасибо, вы знаете, как можно выполнить условие?

Dedi 08.12.2018 18:33

Какое состояние вы ищете?

Agney 08.12.2018 18:39

Только добавить каждого автора один раз

Dedi 08.12.2018 18:40

я сделал правку, показывая свое решение на данный момент

Dedi 08.12.2018 18:42

За исключением того, что вам не нужно распространять emoji.authors для работы с indexOf, выглядит неплохо

Agney 08.12.2018 19:17
Структурированный массив Numpy
Структурированный массив Numpy
Однако в реальных проектах я чаще всего имею дело со списками, состоящими из нескольких типов данных. Как мы можем использовать массивы numpy, чтобы...
T - 1Bits: Генерация последовательного массива
T - 1Bits: Генерация последовательного массива
По мере того, как мы пишем все больше кода, мы привыкаем к определенным способам действий. То тут, то там мы находим код, который заставляет нас...
Что такое деструктуризация массива в JavaScript?
Что такое деструктуризация массива в JavaScript?
Деструктуризация позволяет распаковывать значения из массивов и добавлять их в отдельные переменные.
0
6
50
0

Другие вопросы по теме