在ReactJS中将单个对象转换为对象数组
在ReactJS中将单个对象转换为对象数组
提问于 2018-12-06 11:38:57
我有一个使用emoji-mar节点模块的react应用程序。我正在努力制作它，这样用户就可以在用户评论中添加表情符号了。
因此，我有一个基于类的“注释”组件，到目前为止，我只使用了一个表情符号。
到目前为止，我已经在代码中对基于数组的解决方案进行了评论：
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)
}}
我也有一个增量的方法，即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函数中工作？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-06 11:54:01
this.state.emoji.map不是函数
对，它是物体..。因为处理这个错误
如果需要在数组中添加新对象，请执行以下操作
例如(这仅仅是为了演示)
state = {
emoji: []
};
addEmojiHandler = () => {
let emoji = {
id: "1",
count: 1
};
this.setState(prevState => ({
emoji: [...prevState.emoji, emoji]
}));
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53650624
复制相关文章
相似问题
腾讯云开发者
