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

Question

我有一个使用 emoji-mar 节点模块的 React 应用程序。我正在努力做到这一点，以便用户可以将表情符号添加到用户评论中。

所以我有一个基于 class 的 'comment' 组件，到目前为止我只使用了一个表情符号。

我在代码中评论了我目前对基于数组的解决方案的解决方案：

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

}

我还有一个递增的方法，表情符号对象的计数属性，所以如果一个表情符号被选择多次，它将递增

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

我尝试使用 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}  />
})

尽管我声明它是一个数组。我怀疑，因为数组最初是空的，所以它没有对象可以在 addEmoji 函数中工作？

Answer 1

this.state.emoji.map 不是函数

没错，它是对象...因为抛出了这个错误

如果您需要在阵列上添加新对象，请执行此操作

举例（仅供演示）

  state = {
    emoji: []
  };

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

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

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

Turning single objects into object array in ReactJS

javascript

arrays

dictionary

emoji

reactjs