2016-02-26 114 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

相關問題