Babel 给出 Uncaught TypeError: Cannot read property '' of null答案

【问题标题】：Babel gives Uncaught TypeError: Cannot read property '' of nullBabel 给出 Uncaught TypeError: Cannot read property '' of null
【发布时间】：2018-03-27 00:44:05
【问题描述】：

我遇到了在 babel 中遇到的这个错误： UnCaught TypeError: Cannot read property 'term' of null 当我将组件的状态传递到 Playlist 子组件的 playlists 属性时，就会发生这种情况。

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>
    );

任何帮助将不胜感激。谢谢。

【问题讨论】：

在使用this之前，您需要在构造函数中调用super()
您的 JSX 中也存在问题 - 您使用的是 class 而不是 className 并且您的按钮 onclick 是常规 HTML
感谢您的反馈。但是，我遇到了一个对我来说毫无意义的新错误。我在上面发布了附件。
错误是什么？
你打错了，constuctor 而不是constructor

标签： reactjs ecmascript-6 babeljs

【解决方案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>
    );
  }
}

【讨论】：