Question

我正在使用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>
}

在内部我将表情符号与计数器一起渲染，该计数器确定了表情符号被渲染/单击的次数

我不确定是否应该创建一个匿名函数或一个处理程序，我尝试了使用该处理程序

我已经在状态下创建了一个自定义表情符号对象（最终将是表情符号对象数组）

emoji: {
  id: '',
  count: 0,
}

还有我的增量处理程序方法：

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的对象？

Answer 1

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

Answer 2

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

自定义对象的点击次数增加

2 个答案: