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>
工作謝謝 – user5323957