Question

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

因此，我有一个基于类的“注释”组件，到目前为止，我仅使它与一个表情符号一起使用。

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

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

我尝试使用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中将单个对象转换为对象数组

1 个答案: