Установка вложенного массива внутри объекта в ReactJS

Question

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

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

let authors = []
authors.push(this.props.comment.author.name)
console.log(this.props.comment.author.name)
console.log(authors)
// recreate emojis array
let newEmojis = this.state.emojis.map(emoji => {

  // if emoji already there, simply increment count
  if (emoji.id === newEmoji.id) {
    containsNewEmoji = true;
    return { 
      ...newEmoji,
      ...emoji,
      count: emoji.count + 1,
      authors: [...authors, authors]
    };
  }

  // otherwise return a copy of previous emoji
  return {
    ...emoji
  };
});

console.log(authors)
// if newEmoji was not in the array previously, add it freshly
if (!containsNewEmoji) {
  newEmojis = [...newEmojis, {...newEmoji, count: 1, authors: [...authors, authors]}];
}

// set new state
this.setState({ emojis: newEmojis, 
showEmoji: true});
}

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

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

имя пользователя указано как опора

this.props.comment.author.name

поэтому я попытался создать массив для добавления имен 7

let authors = []
authors.push(this.props.comment.author.name)

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

   return { 
  ...newEmoji,
  ...emoji,
  count: emoji.count + 1,
  authors: [...authors, authors] // i want to save the old copy of authors and pass the new name
};


newEmojis = [...newEmojis, {...newEmoji, count: 1, authors: [...authors, authors]}]; // and then set the object in the end 

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

Answer 1

Это происходит из-за установки поля автора в начале пустого массива в коде,

let authors = []

Вместо этого оно должно быть установлено авторами ранее, как в:

authors: [..emoji.authors, author];

Вам также следует рассмотреть возможность использования function setState при работе с setState.

addEmoji = (newEmoji) => {
  const author = this.props.comment.author.name;
  this.setState(({ emojis: prevEmojis }) => {
    let containsNewEmoji = true;
    const newEmojis = prevEmojis.map((emoji)=>{
      if(newEmoji.id === emoji.id) {
        containsNewEmoji = false;
        return {
          ...emoji,
          count: emoji.count + 1,
          authors: [..emoji.authors, author];
        }
      } else {
        return {
          ...emoji,
        }
      }
    });
    if(containsNewEmojis) {
      newEmojis.push({
        ...newEmoji,
        count: 1,
        authors: [author],
      });
    }
    return {
      emojis: newEmojis,
    }
  });
}

Я изменил переменную containsNewEmoji, чтобы она соответствовала контексту.

Answer 2

Да, в методе addEmoji вы в настоящее время воссоздаете массив authors каждый раз, когда вызывается addEmoji.Вместо определения нового authors массива, вставьте нового автора в существующее свойство authors emoji.

Не зная, как изначально создается объект emoji, я не могу дать однозначного ответа, но, надеюсь, следующее - это начало.Решение предполагает, что объект emoji имеет свойство authors типа array.

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) {
      containsNewEmoji = true;
      return { 
        ...emoji,
        count: emoji.count + 1,
        authors: [...emoji.authors, this.props.comment.author.name]
      };
    }

    // otherwise return a copy of the previous emoji
    return emoji;
  });
};