2016-02-26 123 views
2

虽然调用API与url https://itunes.apple.com/search?term=fun'在Reactjs我有错误哪些说未捕获TypeError:无法读取属性'地图'未定义在Reactjs而我不确定现在做什么任何帮助?Uncaught TypeError:无法读取未定义的属性“映射”在Reactjs

//main app component 
 
var App = React.createClass({ 
 
    //initial state 
 
    getInitialState:function(){ 
 
     return{ 
 
      searchResults:[] 
 
     } 
 
    }, 
 
    //component mount 
 
    componentDidMount(){ 
 
     this.search('https://itunes.apple.com/search?term=fun'); 
 
    }, 
 
    //state change 
 
    showResult:function(response){ 
 
     this.setState({ 
 
      searchResults:response.result 
 
     }) 
 
     // console.log(response); 
 
    }, 
 
    //ajax call 
 
    search:function(URL){ 
 
     $.ajax({ 
 
      type:"GET", 
 
      dataType:"jsonp", 
 
      url:URL, 
 
      success:function(response){ 
 
       this.showResult(response); 
 
      }.bind(this) 
 
     }); 
 
    }, 
 
    createAjax:function(){ 
 
     var query = ReactDOM.findDOMNode(this.refs.query).value; 
 
     var category = ReactDOM.findDOMNode(this.refs.category).value; 
 
     var URL  = 'https://itunes.apple.com/search?term=' + query +'&country=us&entity=' + category; 
 
     this.props.search(URL) 
 
    }, 
 
    render:function(){ 
 
     return(
 
      <div> 
 
       <SearchBox search={this.search}/> 
 
       <Result searchResults={this.state.searchResults}/> 
 
      </div> 
 
     ); 
 
    } 
 
}); 
 
//searchbox component 
 
var SearchBox = React.createClass({ 
 
    render:function(){ 
 
     return(
 
      <div> 
 
       <input type="text"/> 
 
       <select> 
 
        <option value="software">Apps</option> 
 
        <option value="movie">Films</option> 
 
       </select> 
 
       <input type="submit" value="Send" onClick={this.createAjax}/> 
 
      </div> 
 
     ); 
 
    } 
 
}); 
 
var Result = React.createClass({ 
 
    render:function(){ 
 
     var resultItems = this.props.searchResults.map(function(result){ 
 
      return <ResultItem key={result.trackId} trackName={result.trackName}/> 
 
     }); 
 
     return(
 
       <ul> 
 
        {resultItems} 
 
       </ul> 
 
     ); 
 
    } 
 
}); 
 
var ResultItem = React.createClass({ 
 
    render:function(){ 
 
     return(
 
       <li>{this.props.trackName}</li> 
 
     ); 
 
    } 
 
}); 
 
ReactDOM.render(
 
    <App />, 
 
    document.querySelector("#app") 
 
);
<!DOCTYPE html> 
 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title></title> 
 
</head> 
 
<div id="app"></div> 
 
<script src="demo.js" type="text/babel"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> 
 
</body> 
 
</html>

回答

1

response有物业results,但不result

this.setState({ 
    searchResults: response.results 
}) 

Example

+1

工作谢谢 – user5323957

相关问题