Question

使用网址https://itunes.apple.com/search?term=fun＆＃39;调用API时在Reactjs我得到错误哪个说未捕获TypeError：无法读取属性＆＃39; map＆＃39;未定义的Reactjs和我现在不知道该怎么办？

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 1

在response中有属性results，但不是result

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

Example

未捕获的TypeError：无法读取属性＆＃39; map＆＃39; of undefined On Reactjs

1 个答案: