Реакция приставки-редуктора: возвращение редукс-реквизита в jsx

Question

У меня есть список, который я сохранил как состояние, и когда я использую его для вывода jsx, он работает отлично.Тем не менее, если я использую глобальный список и пытаюсь передать его через приставку и отобразить список в JSX, это выдаст мне ошибку Objects are not valid as a React child (found: object with keys {btnId, audioId, keyCode, source, type})..В предыдущем посте я читал, что невозможно отправить в JSX, что может быть причиной того, что он не работает.Тем не менее, я могу заставить его работать так, чтобы он работал с использованием приставки.Мой код ниже:

Список:

    this.state = {
      displayTxt : "Welcome to my digital Drum Machine",
      localSoundList : [
        {
          btnId : "gitarreStrumm1",
          audioId : "Q",
          keyCode : 81,
          source : "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
          type : "audio/mpeg"
        },
        {
          btnId : "gitarreStrumm2",
          audioId : "W",
          keyCode : 87,
          source : "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
          type : "audio/mpeg"
        },
        {
          btnId : "gitarreStrumm3",
          audioId : "E",
          keyCode : 69,
          source : "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3",
          type : "audio/mpeg"
        },
        {
          btnId : "gitarreStrumm4",
          audioId : "A",
          keyCode : 65,
          source : "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3",
          type : "audio/mpeg"
        },   
        {
          btnId : "clap",
          audioId : "S",
          keyCode : 83,
          source : "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
          type : "audio/mpeg"
        },
        {
          btnId : "hat",
          audioId : "D",
          keyCode : 68,
          source : "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3",
          type : "audio/mpeg"
        },
        {
          btnId : "hiKick",
          audioId : "Z",
          keyCode : 90,
          source : "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3",
          type : "audio/mpeg"
        },
        {
          btnId : "loKick",
          audioId : "X",
          keyCode : 88,
          source : "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3",
          type : "audio/mpeg"
        },
        {
          btnId : "hihat",
          audioId : "C",
          keyCode : 67,
          source : "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3",
          type : "audio/mpeg"
        }        
      ]
    };

Функция, которую я использую, заключается в следующем.Обратите внимание, что я уже использовал привязку для этого в конструкторе.

      createPads(){
        return this.state.localSoundList.map((item) => {
          return (<div class="col-sm-4">
              {console.log(item.audioId)}
              <div id={item.btnId} class="btn btn-primary btn-sm drum-pad" onClick={this.clickButton} value={item.audioId}>
                {item.audioId}
                <audio id={item.audioId} class="clip" src={item.source} type={item.type}></audio>
              </div>
            </div>);                        
        });
      }

Теперь для редукса я создал глобальный список:

let mySoundList = {
    displayTxt : "Welcome to my digital Drum Machine",
    localSoundList : [
      {
        btnId : "gitarreStrumm1",
        audioId : "Q",
        keyCode : 81,
        source : "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3",
        type : "audio/mpeg"
      },
      {
        btnId : "gitarreStrumm2",
        audioId : "W",
        keyCode : 87,
        source : "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3",
        type : "audio/mpeg"
      },
      {
        btnId : "gitarreStrumm3",
        audioId : "E",
        keyCode : 69,
        source : "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3",
        type : "audio/mpeg"
      },
      {
        btnId : "gitarreStrumm4",
        audioId : "A",
        keyCode : 65,
        source : "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3",
        type : "audio/mpeg"
      },   
      {
        btnId : "clap",
        audioId : "S",
        keyCode : 83,
        source : "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3",
        type : "audio/mpeg"
      },
      {
        btnId : "hat",
        audioId : "D",
        keyCode : 68,
        source : "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3",
        type : "audio/mpeg"
      },
      {
        btnId : "hiKick",
        audioId : "Z",
        keyCode : 90,
        source : "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3",
        type : "audio/mpeg"
      },
      {
        btnId : "loKick",
        audioId : "X",
        keyCode : 88,
        source : "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3",
        type : "audio/mpeg"
      },
      {
        btnId : "hihat",
        audioId : "C",
        keyCode : 67,
        source : "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3",
        type : "audio/mpeg"
      }        
    ]
  };

это функция, где я получаю "дочерняя ошибка ":

    return this.props.addSound(mySoundList.localSoundList.map((item) => {
      return (<div class="col-sm-4">
          {console.log(item.audioId)}
          <div id={item.btnId} class="btn btn-primary btn-sm drum-pad" onClick={this.clickButton} value={item.audioId}>
            {item.audioId}
            <audio id={item.audioId} class="clip" src={item.source} type={item.type}></audio>
          </div>
        </div>);                        
    }));

, затем я отображаю все в функции рендеринга реакции:

          <div class="container">
            <div class="row">
              { this.createPads() }                     
            </div>
          </div>

Вот ссылка на мой код:

https://codepen.io/roger1891/pen/LaYYaN?editors=0010

Answer 1

Мне кажется, что логика вашего кода немного запуталась.

Если вы измените { this.createPads() } на { console.log(this.createPads()) }, вы увидите в выводе консоли, что вы пытаетесь визуализироватьобъект действия приставки, а не компонент реакции.

Проблема в функции createPads:

createPads(){
    //loops over soundlist and outputs items into html
    return this.props.addSound(mySoundList.localSoundList.map((item) => {
   // return this.state.localSoundList.map((item) => {
      return (<div class="col-sm-4">
          {console.log(item.audioId)}
          <div id={item.btnId} class="btn btn-primary btn-sm drum-pad" onClick={this.clickButton} value={item.audioId}>
            {item.audioId}
            <audio id={item.audioId} class="clip" src={item.source} type={item.type}></audio>
          </div>
        </div>);                        
    }));
  }

Здесь вы вызываете функцию диспетчеризации для редукции, но выпередавая ему избыточное действие, где полезная нагрузка представляет собой список реагирующих компонентов.Реактивные компоненты должны быть в вашей функции рендеринга.Вы должны передать данные как полезную нагрузку в действии приведения и использовать данные для рендеринга реагирующих компонентов в функции рендеринга.

Кроме того, поскольку вы отображаете возвращаемое значение createPads, эта функция должна возвращать реактивные компонентынепосредственно вместо списка реагирующих компонентов, заключенных в простой объект javascript.

Answer 2

Я не уверен, каково ожидаемое поведение вашего приложения, но ошибка, которую вы получаете, связана с тем фактом, что во втором случае вы возвращаете результат функции addSound.Эта функция возвращает объект (with keys {btnId, audioId, keyCode, source, type}), но там ожидается элемент реакции.

Ваш код работает нормально, если вы удалите функцию addSound в функции с помощью child error:

return mySoundList.localSoundList.map((item) => {
  return (<div class="col-sm-4">
      {console.log(item.audioId)}
      <div id={item.btnId} class="btn btn-primary btn-sm drum-pad" onClick={this.clickButton} value={item.audioId}>
        {item.audioId}
        <audio id={item.audioId} class="clip" src={item.source} type={item.type}> 
     </audio>
      </div>
    </div>);                        
});