React Hooks - необученное инвариантное нарушение: объекты недопустимы как дочерний элемент React - PullRequest
Новая
       0

React Hooks - необученное инвариантное нарушение: объекты недопустимы как дочерний элемент React

0 голосов
/ 24 сентября 2019

Я работаю над приложением freeCodeCamp.В моем приложении с компонентами со стрелками функций я устанавливаю состояние display с помощью хука useState в родительском компоненте и передаю его в качестве реквизита дочернему компоненту.В родительском компоненте я пытаюсь отобразить состояние display в div.Однако, когда метод запускается (по щелчку div «drum pad»), приложение вылетает.В консоли я получаю сообщение об ошибке: «Непринятое инвариантное нарушение: объекты недопустимы как дочерние элементы React (найдено: объект с ключами {display}). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив».Я следовал учебному руководству YouTube для этого проекта, но с использованием компонентов функций стрелок и хуков вместо обычных классов, которые используются в учебном пособии - в учебном пособии (около 1:55 из этого видео )успешно выполняет то, что я пытаюсь сделать, поэтому я думаю, что проблема связана с использованием хуков или компонентов функций стрелок. 

// APP COMPONENT (PARENT)

const sounds = [
  { id: 'snare', letter: 'Q', src: 'https://www.myinstants.com/media/sounds/snare.mp3' },
  // etc.
];

const App = () => {

  const [display, setDisplay] = useState(''); // <----

  const handleDisplay = display => { // <----
    setDisplay({ display });
  }

  return (
    <div className="App">
      <div className="drum-machine">
        <div className="display">
          <p>{display}</p> // <---- Related to error in console
        </div>
        <div className="drum-pads">
          {sounds.map(sound => (
            <DrumPad
              id={sound.id}
              letter={sound.letter}
              src={sound.src}
              handleDisplay={handleDisplay} // <----
            />
          ))}
        </div>
      </div>
    </div>
  );
}

// DRUMPAD COMPONENT (CHILD)

const DrumPad = ({ id, letter, src, handleDisplay }) => {

  let audio = React.createRef();

  const handleClick = () => {
    audio.current.play();
    audio.current.currentTime = 0;
    handleDisplay(id); // <----
  }

  return (
    <div
      className="drum-pad"
      id={id}
      onClick={handleClick}
    >
      <p className="letter">{letter}</p>
      <audio
        ref={audio}
        id={letter}
        src={src}
      >
      </audio>
    </div>
  );
}

Ответы [ 2 ]

4 голосов
/ 25 сентября 2019

Вы устанавливаете состояние как объект вместо строки.Снимите фигурные скобки вокруг него. 

const handleDisplay = display => {
  setDisplay(display);
}
1 голос
/ 25 сентября 2019

На этот вопрос уже был дан ответ, но так как вы следуете учебнику, я предполагаю, что вы изучаете React и хотели бы указать на пару вещей, которые помогут вам:)

Указывалось на неправильное использование состояния, но только для пояснения (и причина, по которой я думаю, что вы использовали объект): «по-старому», с компонентами Class, состояние раньше было объектом, и вам нужно было обновить его как объект.Этот пример здесь показывает это.С помощью хуков вам не нужно устанавливать весь объект State, только это конкретное свойство состояния.Подробнее здесь .

Еще один момент, по крайней мере, в вашем примере CodePen вы пропустили импорт для useState.Вам нужно либо импортировать его следующим образом import { useState } from React, либо использовать его следующим образом React.useState, поскольку это отдельный модуль, который не импортируется по умолчанию при импорте React.

Последний момент - при создании компонентовиспользуя цикл (например, <DrumPad> с map), вам необходимо предоставить атрибут «key» .это поможет React отслеживать вещи, которые необходимо обновить или перерисовать.

O обновите ваш код с помощью этих изменений в этой ссылке, если вы хотите, чтобы он работал:

https://codesandbox.io/s/reverent-browser-zkum2

Удачи и надеюсь, что вы наслаждаетесь React Hooks:)

...