未捕获的类型错误：无法读取 Reactjs 上未定义的属性“地图”答案

【问题标题】：Uncaught TypeError: Cannot read property 'map' of undefined On Reactjs未捕获的类型错误：无法读取 Reactjs 上未定义的属性“地图”
【发布时间】：2016-06-09 05:52:47
【问题描述】：

在 Reactjs 上使用 url https://itunes.apple.com/search?term=fun' 调用 API 时出现错误，提示 Uncaught TypeError: Cannot read property 'map' of undefined On 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>

【问题讨论】：

标签： ajax reactjs

【解决方案1】：

在response 中有属性results，但没有result

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

Example

【讨论】：