在 ReactJS 中的对象内设置嵌套数组答案

【问题标题】：Setting nested array inside object in ReactJS在 ReactJS 中的对象内设置嵌套数组
【发布时间】：2019-05-10 00:34:02
【问题描述】：

我有一个类似帖子的应用程序，用户可以在帖子中添加带有表情符号的 cmets，我有一个方法：

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

如代码中的方法 cmets 所示，每个表情符号仅显示一次，否则，计数变量将增加，显示在每个注释下方。

我想添加该功能，以保存添加表情符号的人的给定用户名数组。

用户名作为道具给出

this.props.comment.author.name

所以我尝试制作一个数组来添加名称 7

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

问题是每次传递新的表情符号实例时都会被覆盖，我尝试将其保存到对象中

   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

到目前为止，数组每次都被覆盖，但我可以在对象内部设置参数吗？

【问题讨论】：

标签： arrays reactjs object nested

【解决方案1】：

这是由于在代码的早期将作者字段设置为空数组，

let authors = []

相反，它必须更早地设置为作者，如：

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

在处理setState 时，还应该考虑使用setState 的function。

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 变量，使其适合上下文。

【讨论】：

非常好的答案，结构合理，我确实选择了另一个，因为它更适合我的架构，但 +1 表示非常努力！

【解决方案2】：

是的，在 addEmoji 方法中，您当前每次调用 addEmoji 时都会重新创建 authors 数组。不要定义新的authors 数组，而是将新作者推送到表情符号的现有authors 属性中。

在不知道emoji 对象最初是如何创建的情况下，我无法给出明确的答案，但希望以下是一个开始。该解决方案假定emoji 对象具有数组类型的authors 属性。

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

【讨论】：