Google apis附近搜索无法将json数据获取到react js中

Question

我试图做的是从 div 内的坐标显示附近第一个地方的名称。它只是没有显示。

这是我获取 json 的代码

  const [business1, setbusiness1] = useState(null);
  useEffect(() => {
      fetch('https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8943,151.2330&radius=1000&type=restaurant&keyword=attractions&key=MyApiKey&maxprice=1000')
          .then(response => response.json())
          .then(data => 
          {
            setbusiness1(data.results[0].name)
            console.log("data", data.results)
          });
  }, []);

这是我的代码，应该显示第一个景点的名称

  <div className="DetailedDescriptionsHalfLeft">
    agenda planner will be here 
    {business1} asfasfa

  </div>

结果是div里面什么都没有输出。

我检查了控制台输出，这是错误

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8943,151.2330&radius=1000&type=restaurant&keyword=attractions&key=MYApiKey&maxprice=1000. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

Answer 1

您可能应该使用 async()。 这是一个很好的例子。

https://www.robinwieruch.de/react-hooks-fetch-data