Question

我有一个类似Post的应用程序，用户可以在其中添加带有表情符号的评论，我有一种方法：

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

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

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

用户名以道具形式给出

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

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

Answer 1

这是因为在代码的早期就将author字段设置为空数组

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

Answer 2

是的，在addEmoji方法中，您当前正在每次调用authors时重新创建addEmoji数组。无需定义新的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;
  });
};

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

2 个答案: