反應鉤子中的異步等待承諾拒絕

我想我誤解了異步等待是如何作業的，尤其是使用另一個檔案中的函式。所以我想使用 API 上的 axios 呼叫從經度和緯度獲取地址

import { getAddressFromLongLat } from "../hooks/queries-hook";
import React, { useEffect, useState } from "react";

const Component = (props) => {
  const [address, setAddress] = useState(null);
  useEffect(() => {
    const fetchFromLongLat = async () => {
      if (props.coords) {
        const response = await getAddressFromLongLat(props.coords);
        console.log("response from nominatim "   JSON.stringify(response, null, 4));
        setAddress(response);
      }
    };
    fetchFromLongLat();
  }, []);

  return <></>;
};

然后進入queries-hook.js

import axios from "axios";

export const getAddressFromLongLat = async (coords) => {
  const URL = "http://nominatim.openstreetmap.org/reverse";
  const response = await axios.get(URL, {
    params: {
      format: "json",
      lat: coords.lat,
      lon: coords.long
    },
    headers: {
      "Content-Type": "application/json; charset=UTF-8"
    }
  });
  return {
    street: response.address.road   " "   response.address.house_number,
    cp: response.address.postcode,
    city: response.address.town,
    country: response.address.country_code.toUpperCase()
  };
};

有人可以解釋一下我應該如何正確撰寫帶有這些異步等待的代碼，以免出現錯誤：

可能未處理的 Promise Rejection (id: 0): TypeError: undefined is not an object (evalating 'response.address.road')

uj5u.com熱心網友回復：

問題是由于response不包含address屬性和所有其余部分。但是response.data做。

您必須在之前添加一個console.log(response);才能return弄清楚。的輸出{ "lat": 50.806002951249546, "long": 4.410705976188183 } 將是這樣的：

{
  "data": {
    "place_id": 113461740,
    "licence": "Data ? OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright",
    "osm_type": "way",
    "osm_id": 30994925,
    "lat": "50.8066154",
    "lon": "4.410838323013642",
    "display_name": "Parc sportif des Trois Tilleuls, Avenue Léopold Wiener - Léopold Wienerlaan, Le Triangle - De Driehoek, Ватермаль-Буафор, Брюссельский столичный регион, 1170, Бельгия",
    "address": {
      "leisure": "Parc sportif des Trois Tilleuls",
      "road": "Avenue Léopold Wiener - Léopold Wienerlaan",
      "neighbourhood": "Le Triangle - De Driehoek",
      "town": "Ватермаль-Буафор",
      "county": "Брюссельский столичный регион",
      "region": "Брюссельский столичный регион",
      "ISO3166-2-lvl4": "BE-BRU",
      "postcode": "1170",
      "country": "Бельгия",
      "country_code": "be"
    },
    "boundingbox": [
      "50.8042107",
      "50.80902",
      "4.4079878",
      "4.4130556"
    ]
  },
  "status": 200,
  "statusText": "",
  ...
  (cutted)
} 

所以固定功能：

const getAddressFromLongLat = async (coords) => {
  // switched to HTTPS here also
  const URL = "https://nominatim.openstreetmap.org/reverse";
  const response = await axios.get(URL, {
    params: {
      format: "json",
      lat: coords.lat,
      lon: coords.long
    },
    headers: {
      "Content-Type": "application/json; charset=UTF-8"
    }
  });
  const { data } = response; // equal to const data = response.data
  return {
    street: data.address.road   " "   data.address.house_number,
    cp: data.address.postcode,
    city: data.address.town,
    country: data.address.country_code.toUpperCase()
  };
};

uj5u.com熱心網友回復：

import axios from 'axios';
import React from 'react'
import { useEffect } from 'react';
import { useState } from 'react';

const Try = () => {

    const [address, setAddress] = useState(null);

    const getAddressFromLongLat = async () => {
        const URL = "http://nominatim.openstreetmap.org/reverse";
        const response = await axios.get(URL, {
            params: {
                format: "json",
                lat: 36.884804,
                lon: 30.704044
            },
            headers: {
                "Content-Type": "application/json; charset=UTF-8"
            }
        });
        const { data } = response; **// There is your mistake.**
        return {

            street: data.address.road   " "   data.address.house_number,
            cp: data.address.postcode,
            city: data.address.town,
            country: data.address.country_code.toUpperCase()
        };
    };

    useEffect(() => {
        const fetchFromLongLat = async () => {
            if (1 === 1) {
                const response = await getAddressFromLongLat();
                console.log("response from nominatim "   JSON.stringify(response, null, 4));
                setAddress(response);
            }
        };
        fetchFromLongLat();
    }, []);

    console.log(address)
    return (
        <div>try</div>
    )
}

export default Try

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

uj5u.com熱心網友回復：

我不確定，但可能你不需要在第二個函式中使用 async...await 。這就像tako里面的tako。但是你只需要在一個 tako 鈴鐺里放兩個 tako。

標籤：反应 反应式 异步 反应钩子 axios

上一篇：Boostasync_read_some資料不會持續很長時間

下一篇：為什么Promise.race([Promise.resolve(1),2]).then(console.log)回傳1而不是2？