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

问题描述

我想要做的是从 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.

解决方法

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

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