Question

我有一个react应用程序，其中的注释可以附加表情符号。

我创建了一个函数，该函数可以创建表情符号数组并将其设置为状态。

每个表情符号对象都有一个ID（表情符号的名称），一个计数（已添加多少次）和一个作者（用户名称（如果添加了表情符号，则为用户）。

截至目前，我有条件检查是否已添加表情符号，如果已添加，则计数器变量将增加，因此仅每个表情符号添加一次。此外，每次都会增加作者的数量，但是我想使其成为有条件的，因此仅每个作者被添加一次。

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]
};

}

这似乎是多余的，可以改进此逻辑吗？

编辑：到目前为止，我的想法或解决方案是进行另外一个处理，即我只返回数组，其中数组内有author的重复元素。

  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]
};

在ReactJS函数中有条件地向数组添加唯一元素

0 个答案: