javascript - 使用 React 读取嵌套 JSON 数据

Question

我正在尝试读取从地方 api url 调用发回的嵌套 json，但在读取全部内容时遇到问题。我无法向控制台发送任何内容，就像它不起作用一样。我可以毫无问题地读取未嵌套的 json 。如果有人可以看一下我的代码和 json 数据示例，我将不胜感激!

import React, { Component } from 'react';

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      results:[],
    };
  }

  componentDidMount(){
    fetch("https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=34.7448,-87.6675&radius=5000&type=restaurant&key=xxxxx")
      .then(response => response.json())
      .then(data => this.setState({results: data.results}));
  }

  render() {
    const { results } = this.state;

    return (
      <div className="App">
        <ul>
          {results.map(result =>
            <li key={result.id}>
            </li>
          )}
        </ul>
      </div>
    );
  }
}

export default App;

JSON 数据:

{
html_attributions: [ ],
next_page_token: "CvQD5wEAAMlYM9qnA7dPRRpXc_romXZ0rACsqjpbHrW9Jed2iPlAPyPcyFLaj9-LN6SahnobyRY1LrKJt9ABLntmdk0_sneRnYQ15cGFp1rUJ9KyzJpFjy0s7w9EA1gQmw1RgelR1WZzD2nX2Q2SZ3YqfWvG4B6iuxPncR8MJ8lgskEcctfU2aZPdcWgF3TuxY6ig1-fBi3Ed6GE4g1UKg7rBw9VbA7PUI4aDp7wIx9nWDqCXFtkfSshm7-lUbWrdND-nWQaEUj55chIvkShUBuYyuhHxI1qbzr__LATXN-_ZhHgxU__kpj3oC8A4ueNxXB4wC5_UAKu0KeLUgmy2_1STUVKKt1hr6CcVU9__wv2q5g9u3ZzbVOqollHmAs5MZHaJOxTreHKGTqQtDOdoUX5KQaItY8El4OAUjp1Dlrhhbp8agH91OjOA9mrSPDU-YCtXFPh_z6S-I_7VDwLJ0W4uRmx1kzi-MGAlxC7RTabWES4vrURvMGOJgbdEXyQAukambnahHSGBhUpBA_nD4hwBcxYZ-OPolCimHMAK9wfEYwt8s-wSf4JWfuoCD1BaoPr2kcMRDuGpOz5u2HUoJMOyrvbo6-lB7S0fxyspswkFFvA-dnZMm60RLN2CJKq69Aw_Rg2DaSb7An5S28v40Q_xOd0Q28SEJHtvCLC3J7_Rlt4TncO88caFHFYScWvmlOcMMcVUOisca0Ne-WP",
results: [
{
geometry: {
location: {
lat: 34.74653499999999,
lng: -87.668218
},
viewport: {
northeast: {
lat: 34.7479832802915,
lng: -87.6668681697085
},
southwest: {
lat: 34.7452853197085,
lng: -87.6695661302915
}
}
},
icon: "https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
id: "aeaff0d9129af889d2ce2ebad4bfc083c3d91ca0",
name: "Ruby Tuesday",
opening_hours: {
open_now: false
},
photos: [
{
height: 3024,
html_attributions: [
"<a href="https://maps.google.com/maps/contrib/117021142286141185731/photos">Marcus Kirby</a>"
],
photo_reference: "CmRaAAAAmps7PW42HZPDGKNNCJLfFCn-wY020ErmFSOnwG-FygHoT-vaIEHfIeCl4rCvwrSikuBDEOUbVH5f1f4Vg0XNQn-OJ-JgF5Z1wBxDldr2KKO7ozO6ntTdTNRLARSO7mdjEhAdEenIN2hiMQp4nRjhMooaGhTEeufW9HV9_3v5IQf0amuZaWKqcQ",
width: 4032
}
],
place_id: "ChIJ02hnAy5PfYgRrflPRNUJJ0w",
plus_code: {
compound_code: "P8WJ+JP Muscle Shoals, Alabama, United States",
global_code: "866JP8WJ+JP"
},
price_level: 2,
rating: 3.9,
reference: "ChIJ02hnAy5PfYgRrflPRNUJJ0w",
scope: "GOOGLE",
types: [
"bar",
"restaurant",
"point_of_interest",
"food",
"establishment"
],
vicinity: "1704 Woodward Avenue, Muscle Shoals"
},
{
geometry: {
location: {
lat: 34.7638758,
lng: -87.6682993
},
viewport: {
northeast: {
lat: 34.7652247802915,
lng: -87.66695031970849
},
southwest: {
lat: 34.7625268197085,
lng: -87.66964828029151
}
}
},
icon: "https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png",
id: "2fb41b0632709f6b432883e1766d4dca9a971a43",
name: "Outback Steakhouse",
opening_hours: {
open_now: false
},
photos: [
{
height: 5312,
html_attributions: [
"<a href="https://maps.google.com/maps/contrib/101974447743919752743/photos">Massimiliano Caldi</a>"
],
photo_reference: "CmRaAAAAS-Tkrb_Pszaocvp56KaXs-RcPUPq92MgQOI8AMM5VSZdJsw4CrH2IXUc9ZdSiigA-9gKFnLDqzRSiusyAK3yRGZSH6316ju0XS-4de9LxLIZVF7Eps-Crpqpf8OabUB5EhCovCYnGErZB0QoW33SHtE_GhSRe4kAWb9HEcNSEi_xumkAqPdH1w",
width: 2988
}
],
place_id: "ChIJ3Z2X8sJIfYgRxAhj3l6uvgA",
plus_code: {
compound_code: "Q87J+HM Sheffield, Alabama, United States",
global_code: "866JQ87J+HM"
},
price_level: 2,
rating: 4.3,
reference: "ChIJ3Z2X8sJIfYgRxAhj3l6uvgA",
scope: "GOOGLE",
types: [
"bar",
"restaurant",
"point_of_interest",
"food",
"establishment"
],
vicinity: "4838 Hatch Boulevard, Sheffield"
}
],
status: "OK"
}

Answer 1

您正尝试在客户端使用 Google Places API Web 服务，而它是为服务器端应用程序设计的。

这可能就是服务器未设置适当的 CORS 响应 header 的原因。

你可以试试

How to use CORS to access Google APIs

或

this question might help