Question

我尝试从API调用中获取结果，将其存储在某个状态，然后将其打印出来。 fetch的结果在控制台中正确打印...但是浏览器会抛出错误。

import React, { Component } from 'react'
import {Link} from 'react-router'
import ReactDOM from 'react-dom'


class NorthAmerica extends Component{

    constructor() {
        super();
        this.state = {jsonData: ""};
    }

    componentDidMount() {
        const el = ReactDOM.findDOMNode(this.display);
        var map = new jvm.Map({
            container: jQuery(el),
            map: 'north_america_mill',
            backgroundColor: 'transparent',
            hoverColor: true,
            regionStyle: {
                initial: {
                    fill: '#245b87'
                },
                hover: {
                    fill: "#76c4ea"
                }
            },
            onRegionClick:function(event, code){
                var name = map.getRegionName(code);
                fetch('http://localhost:8080/Search/SearchRestaurants?'
                    + 'searchTerm=' + name + '&location=' + 'toronto').then(response => {
                    if(response.ok){
                        response.json().then(json => {
                            this.setState({jsonData: JSON.parse(json)});
                        });
                    }
                    else{
                        this.setState({jsonData: ""});
                    }
                });
            }

        })
    }

    render(){
        return(
            <div>
                <button id="back"><Link to="/discover" style={{display: 'block', height: '100%'}}/></button>
                <h1 id="discover_header">/ NORTH AMERICA</h1>
                <div id="map" ref={display => this.display = display} style={{width: '1000px', height: '700px'}}/>
                <p> JSON: {this.state.jsonData}</p>
            </div>
        )
    }
}

export class northAmerica extends React.Component{
    render(){
        return(<NorthAmerica/>);
    }
}

代码运行，但是当我在浏览器中打开它时，我在控制台中收到以下错误：

:8080/NorthAmerica:1 Uncaught (in promise) SyntaxError: Unexpected end of JSON input

非常新的反应，javascript和所有这些，所以任何建议都会非常感激！

感谢。

编辑：

控制台返回：

Querying https://api.yelp.com/v2/search?term=Canada&location=toronto&limit=3&cc=CA ...
{"region": {"span": {"latitude_delta": 0.006146690000008448, "longitude_delta": 0.014174379999985831}, "center": {"latitude": 43.653332250000005, "longitude": -79.3769827}}, "total": 7869, "businesses": [{"is_claimed": false, "rating": 2.0, "mobile_url": "https://m.yelp.ca/biz/canada-post-toronto-16?adjust_creative=xemf3Y2VeAFbwwCWCR1xBA\u0026utm_campaign=yelp_api\u0026utm_medium=api_v2_search\u0026utm_source=xemf3Y2VeAFbwwCWCR1xBA", "rating_img_url": "https://s3-media2.fl.yelpcdn.com/assets/2/www/img/b561c24f8341/ico/stars/v1/stars_2.png", "review_count": 6, "name": "Canada Post", "rating_img_url_small": "https://s3-media2.fl.yelpcdn.com/assets/2/www/img/a6210baec261/ico/stars/v1/stars_small_2.png", "url": "https://www.yelp.ca/biz/canada-post-toronto-16?adjust_creative=xemf3Y2VeAFbwwCWCR1xBA\u0026utm_campaign=yelp_api\u0026utm_medium=api_v2_search\u0026utm_source=xemf3Y2VeAFbwwCWCR1xBA", "categories": [["Post Offices", "postoffices"]], "phone": "4165060911", "snippet_text": "So I bookmarked this place in my mind when I came across it a few days ago running around the historical district maze because I had a lot of postcards I...", "snippet_image_url": "https://s3-media1.fl.yelpcdn.com/photo/b45HAZwX9Y7w_K754EQp6A/ms.jpg", "display_phone": "+1-416-506-0911", "rating_img_url_large": "https://s3-media4.fl.yelpcdn.com/assets/2/www/img/c00926ee5dcb/ico/stars/v1/stars_large_2.png", "id": "canada-post-toronto-16", "is_closed": false, "location": {"city": "Toronto", "display_address": ["595 Bay Street", "Downtown Core", "Toronto, ON M5G 2C2"], "geo_accuracy": 8.0, "neighborhoods": ["Downtown Core"], "postal_code": "M5G 2C2", "country_code": "CA", "address": ["595 Bay Street"], "coordinate": {"latitude": 43.6562119, "longitude": -79.3832626}, "state_code": "ON"}}, {"is_claimed": false, "rating": 3.5, "mobile_url": "https://m.yelp.ca/biz/canada-post-toronto-5?adjust_creative=xemf3Y2VeAFbwwCWCR1xBA\u0026utm_campaign=yelp_api\u0026utm_medium=api_v2_search\u0026utm_source=xemf3Y2VeAFbwwCWCR1xBA", "rating_img_url": "https://s                                                                        3-media1.fl.yelpcdn.com/assets/2/www/img/5ef3eb3cb162/ico/stars/v1/stars_3_half.png", "review_count": 7, "name": "Canada Post", "rating_img_url_small": "https://s3-media1.fl.yelpcdn.com/assets/2/www/img/2e909d5d3536/ico/stars/v1/stars_small_3_half.png", "url": "https://www.yelp.ca/biz/canada-post-toronto-5?adjust_creative=xemf3Y2VeAFbwwCWCR1xBA\u0026utm_campaign=yelp_api\u0026utm_medium=api_v2_search\u0026utm_source=xemf3Y2VeAFbwwCWCR1xBA", "categories": [["Post Offices", "postoffices"]], "phone": "4162142352", "snippet_text": "Although it took me two tries before I actually got to send out my mail.. The first time i went at prime time lunch hour and there were probably 10 people...", "image_url": "https://s3-media4.fl.yelpcdn.com/bphoto/UDknxp5yEtbG23fcb7ktXg/ms.jpg", "snippet_image_url": "https://s3-media4.fl.yelpcdn.com/photo/liY7MzZA_SegCa1hUzwlTg/ms.jpg", "display_phone": "+1-416-214-2352", "rating_img_url_large": "https://s3-media3.fl.yelpcdn.com/assets/2/www/img/bd9b7a815d1b/ico/stars/v1/stars_large_3_half.png", "id": "canada-post-toronto-5", "is_closed": false, "location": {"city": "Toronto", "display_address": ["119 Spadina Avenue", "Downtown Core", "Toronto, ON M5C 1J4"], "geo_accuracy": 9.5, "neighborhoods": ["Downtown Core"], "postal_code": "M5C 1J4", "country_code": "CA", "address": ["119 Spadina Avenue"], "coordinate": {"latitude": 43.6505383, "longitude": -79.3770895}, "state_code": "ON"}}, {"is_claimed": false, "rating": 4.5, "mobile_url": "https://m.yelp.ca/biz/canada-post-toronto-8?adjust_creative=xemf3Y2VeAFbwwCWCR1xBA\u0026utm_campaign=yelp_api\u0026utm_medium=api_v2_search\u0026utm_source=xemf3Y2VeAFbwwCWCR1xBA", "rating_img_url": "https://s3-media2.fl.yelpcdn.com/assets/2/www/img/99493c12711e/ico/stars/v1/stars_4_half.png", "review_count": 2, "name": "Canada Post", "rating_img_url_small": "https://s3-media2.fl.yelpcdn.com/assets/2/www/img/a5221e66bc70/ico/stars/v1/stars_small_4_half.png", "url": "https://www.yelp.ca/biz/canada-post-toronto-8?adjust_creative=xemf3Y2VeAFbwwCWCR1xBA\u0026utm_campaign=yelp_api\u0026utm_medium=api_v2_search\u0026utm_source=xemf3Y2VeAFbwwCWCR1xBA", "categories": [["Post Offices", "postoffices"]], "phone": "4168651833", "snippet_text": "Really love this little place, usually a visit to the post office is an experience I dread as it's usually a test of patience with unhappy surely service...", "image_url": "https://s3-media2.fl.yelpcdn.com/bphoto/9pw64sWPH67LF3mb38jQaA/ms.jpg", "snippet_image_url": "https://s3-media1.fl.yelpcdn.com/photo/XhqdU7p7bfdrzq9b9yVv7g/ms.jpg", "display_phone": "+1-416-865-1833", "rating_img_url_large": "https://s3-media4.fl.yelpcdn.com/assets/2/www/img/9f83790ff7f6/ico/stars/v1/stars_large_4_half.png", "id": "canada-post-toronto-8", "is_closed": false, "location": {"city": "Toronto", "display_address": ["260 Adelaide Street E", "Corktown", "Toronto, ON M5A 1N1"], "geo_accuracy": 8.0, "neighborhoods": ["Corktown"], "postal_code": "M5A 1N1", "country_code": "CA", "address": ["260 Adelaide Street E"], "coordinate": {"latitude": 43.65191, "longitude": -79.3705}, "state_code": "ON"}}]}

Answer 1

使用fetch您不需要parse()回复，json()方法有点像JSON.parse()的捷径。它足以做到：

this.setState({ jsonData: json });

React fetch导致Uncaught（在promise中）SyntaxError：JSON输入的意外结束

1 个答案: