Babel给出Uncaught TypeError：无法读取null的属性

Posted 2021-05-05

我遇到了这个错误，我得到了babel：UnCaught TypeError：无法读取null的属性'term'这是因为我将组件的状态传递给播放列表子组件的播放列表道具。

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

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

答案

一些错误，构造函数拼写错误，并且您没有包含渲染功能。

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