Question

增加数组内对象的数量

2018-12-06

807

javascript reactjs

我有一个在 ReactJS 中制作表情符号的函数

addEmoji = (emoji) =>{

  //with array function


 let newEmoji = {
    id: emoji.id,
    count: 1
  };
  if(this.state.emojis.filter(emoji =>{
    if(emoji.id === newEmoji.id){
      this.increment(newEmoji);
    }
  }))
  console.log(this.state.emojis)
  this.setState( prevState => ({
    emojis: [...prevState.emojis, newEmoji],
    showEmoji: true
  }))

它接受来自 emoji-mart 节点模块的自定义表情符号对象

我现在的问题是我想检查对象是否已经显示，如果已经显示，则增加计数。

我已经创建了这个增量方法，其中每个表情符号对象的计数都会增加。我的问题是我必须改变整个数组中那个对象的状态，这给我带来了困难

increment = (newEmoji) =>{
 console.log(id);

  let count = newEmoji.count
  count = newEmoji.count+1
  console.log(newEmoji.count)
 this.setState(   

   {emoji: newEmoji} // how do i change the state of that one obejct inside the array
 )
 console.log(this.state.emoji.count)
}

编辑：我已经提供了状态，以查看是否正在设置状态。

this.state= {
 emojis: []
}

Answer 1

您可以在迭代过程中重新创建整个数组，并在必要时更改表情符号的数量，一举两得。这是未经测试的版本：

// 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 { 
      ...newEmoji,
      ...emoji,
      count: emoji.count + 1,
    };
  }

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

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

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