Babel выдает Uncaught TypeError: Cannot read property '' of null

Я застрял с этой ошибкой, которую я получаю в babel: UnCaught TypeError: не удается прочитать свойство 'term', равное нулю. Это происходит, когда я передаю состояние компонента в свойство playlists дочернего компонента Playlist.

class PlaylistSearchBar extends React.Component{

constuctor(){
    super();
    const initialState = {
         term: {tracks: [], playlists: []}
    }

    this.state = {
         ...initialState
    };
}

return(
        <div>
            <div className = "main">
                    <div className = "ui massive icon input">
                        <input type = "text" placeholder = "Search for a song or artist..." className = "js-search input-search"/>
                        <i className = "search icon js-submit"></i>
                    </div>
                    <button onclick = {localStorageClear()} className = "clear">Clear Playlist</button>
            </div>

            <div className = "search-results js-search-results ui cards">

            </div>
Error here at term  --> <Playlist playlists = {this.state.term.playlists} setTracksToNil = {this.setState({tracks: []})} embedItems = {this.getEmbed}/>
           </div>
    );

Любая помощь будет оценена по достоинству. Спасибо.

вам нужно вызвать super() в своем конструкторе, прежде чем использовать this

— 27.03.2018 02:45

в вашем JSX также есть проблемы - вы используете class вместо className, а ваша кнопка onclick представляет собой обычный HTML

— 27.03.2018 02:46

Я ценю ваш отзыв. Однако я получаю новую ошибку, которая не имеет для меня смысла. Выложил прикрепление выше.

— 27.03.2018 02:49

в чем ошибка?

— 27.03.2018 02:50

у вас опечатка, constuctor вместо constructor

— 27.03.2018 03:01

Это было неловко. Спасибо.

— 27.03.2018 03:10

мы все были там - не переживайте

— 27.03.2018 03:18

это должно быть закрыто, потому что это опечатка?

— 27.03.2018 03:23

reactjs ecmascript-6 babeljs

27.03.2018 02:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

260

Ответы 1

Пара ошибок, конструктор неправильно написан, и вы не включили функцию рендеринга.

class PlaylistSearchBar extends React.Component {
  constructor(props) {
    super(props);
    const initialState = {
      term: { tracks: [], playlists: [] }
    }
    this.state = {
      ...initialState
    };
  }

  render() {
    return (
      <div>
        <div className = "main">
          <div className = "ui massive icon input">
            <input type = "text" placeholder = "Search for a song or artist..." className = "js-search input-search" />
            <i className = "search icon js-submit"></i>
          </div>
          <button onclick = {localStorageClear()} className = "clear">Clear Playlist</button>
        </div>

        <div className = "search-results js-search-results ui cards">

        </div>
        <Playlist playlists = {this.state.term.playlists} setTracksToNil = {this.setState({ tracks: [] })} embedItems = {this.getEmbed} />
      </div>
    );
  }
}

27.03.2018 04:33

Другие вопросы по теме

Aurelia не обновляет значение объекта в массиве

Является ли метод жизненного цикла React автоматически связанным? Если нет, не следует ли связывать их с помощью .bind (this)?

Использование поведения карты / фильтра в экземпляре карты

Время от времени появляется ошибка только в iFrame: Main.js Интерпретируется как формат модуля amd, но называется System.register

Автоматическая страница обновления клиента AngualrJS OIDC

Как вы определяете и импортируете тип класса в поток?

Как изменить точный путь после успешного входа в систему

Функция обратного вызова, которая возвращает массив всех сообщений в блоге wordpress с заданной категорией

Async await для триггера события загрузки изображения

ECMAScript 2017: Куда делась «13.2 Создание функциональных объектов» (из ES5)?

Babel выдает Uncaught TypeError: Cannot read property '' of null

Ответы 1

Другие вопросы по теме

Похожие вопросы