Javascript 增加自定义对象的单击次数

我正在使用React中的一个自定义库，您可以在其中添加表情符号，我正在尝试为对象创建一个计数器变量，每当用户单击它时，计数器变量都会增加

关键是要将它做成一个数组，由几个表情符号组成，但到目前为止，我试图让它只使用一个表情符号

因此，我有一个条件，即表情符号是否应该显示

{
  this.state.showEmoji &&
    <div className="emoji">
      <Emoji 
        onClick={this.increment}
        emoji={{ id: this.state.emoji.id, skin: 1, }}
        size={25}
      />
      <p>{this.state.emoji.count}</p>
    </div>
}

与我的增量处理程序方法一起：

increment = (emoji) =>{
  console.log(emoji.id);
  console.log(this.state.emoji.id);
  this.setState({
   count: this.state.emoji[emoji.id].count++
  });
}

我成功地将表情对象的状态id记录到控制台中，然后传入表情对象，并且它们匹配

但当我尝试改变状态时，我得到了以下错误：

TypeError: Cannot read property 'count' of undefined

---

在这种情况下，为什么我不能使用id访问对象？

请查看，它可能也有助于管理表情符号数组。

请查看，它可能也有助于管理表情符号数组。

您认为

this.state.emoji[emoji.id]会发生什么

？我想知道它是否会访问该对象，但因为只有一个对象，我不认为这是必要的

this.state.emoji[emoji.id]

？我想知道它是否会访问该对象，但因为只有一个对象，我认为没有必要

increment = (emoji) =>{
 const { emoji } = this.state; // isn't that more readable?
 const _emoji = {
   ...emoji,
   count: emoji.count + 1
 } //this will create a copy of your emoji object.
   // use +1 instead of ++ to make sure you are keeping the original count value as it is, 'PURE PROGRAMMING'
 this.setState({ emoji: _emoji });
}

increment = (emoji) =>{
 const { emoji } = this.state; // isn't that more readable?
 const _emoji = {
   ...emoji,
   count: emoji.count + 1
 } //this will create a copy of your emoji object.
   // use +1 instead of ++ to make sure you are keeping the original count value as it is, 'PURE PROGRAMMING'
 this.setState({ emoji: _emoji });
}