Превращение отдельных объектов в массив объектов в ReactJS - PullRequest
Новая
       6

Превращение отдельных объектов в массив объектов в ReactJS

0 голосов
/ 06 декабря 2018

У меня есть приложение реагирования, которое использует модуль узла 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>
        }

Я пытался использовать функцию картыотобразить эмодзи в переменную, но она выдала ошибку 

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 Ответ

0 голосов
/ 06 декабря 2018

this.state.emoji.map не является функцией

верно, это объект ... потому что выдает эту ошибку

, если вам нужно добавить новый объектнапример, для массива сделайте это

(это только для демонстрации) 

  state = {
    emoji: []
  };

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

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