Javascript 在ReactJS中将单个对象转换为对象数组

我有一个react应用程序，它使用emoji mar节点模块。我正在尝试这样做，用户可以在用户评论中添加表情符号

所以我有一个基于类的“注释”组件，到目前为止我只使用了一个表情符号

我已在代码中对我迄今为止的基于阵列的解决方案进行了注释：

  constructor(props){
super(props)
this.state ={
  loading: false,
  showModal: false,
  showEmoji: false,
  //emoji: []
  emoji: {
      id: '',
      count: 1
  }
}

//executed, when a user picks an emoji, the emoji object is sent in as parameter
addEmoji = (emoji) =>{
console.log(emoji.id)
console.log(this.state.emoji.id)
if(emoji.id === this.state.emoji.id){
this.increment(emoji)
}else{
let selectedEmoji = {
    id: emoji.id,
    count: 1
}
this.setState({
  emoji: selectedEmoji,
  showEmoji: true
})
console.log(this.state.emoji)
}

}

我还有一个递增的方法，即表情符号对象的count属性，因此如果一个表情符号被多次拾取，它将递增一次

  increment = (emoji) =>{
  console.log(emoji.id)
  console.log(this.state.emoji.id)
  console.log(this.state.emoji.count)
  let newEmoji = {...this.state.emoji}
  newEmoji.count = this.state.emoji.count+1
  console.log(newEmoji.count)
 this.setState(   
   {emoji: newEmoji}
 )
 console.log(this.state.emoji.count)
}

和我的条件渲染，在这里我显示我的表情

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

{this.state.showmoji&&this.state.emoji！=null&&
{/*{emojis}*/}
{
}
{this.state.emoji.count}

}

我尝试使用map函数将表情符号映射到一个变量中，但它给出了错误

this.state.emoji.map is not a function

let emojis = this.state.emoji.map( (emoji, index) =>{
  return <Emoji onClick={this.increment} tooltip={true}
  emoji={{id: emoji.id, skin: 1}} size={25}  />
})

this.state.emoji.map不是函数
让emojis=this.state.emoji.map（（emoji，index）=>{
回来
})

---

即使我声明它是数组。我怀疑，由于数组最初是空的，所以它在addEmoji函数中没有对象可以工作？

this.state.emoji.map不是函数

没错，这是一个物体。。。因为我犯了这个错误

如果需要在数组中添加新对象，请执行以下操作

例如（这仅用于演示）

---

我明白这是有道理的，但它只会在数组为空时给出这个错误吗？这个错误抛出是因为对象没有映射方法。。。在本例中，您正在删除映射对象。。。只需像这样检查（this.state.emoji&&domap here）您的代码不清楚抱歉…因此我应该在render方法内部映射，而不是创建单独的变量？请尝试不使用变量{this.state.emoji&&this.state.emoji.map（…）}

  state = {
    emoji: []
  };

  addEmojiHandler = () => {
    let emoji = {
      id: "1",
      count: 1
    };

    this.setState(prevState => ({
      emoji: [...prevState.emoji, emoji]
    }));
  };