来自两个 api 的 JSON-Server API 请求我需要输入邮政编码并返回天气信息

如何解决来自两个 api 的 JSON-Server API 请求我需要输入邮政编码并返回天气信息

我正在使用 JSON-server 创建一个天气应用。

我想通过 GET 请求调用提供的 API，以检索任何给定邮政编码的天气数据。即，如果用户在搜索栏中输入 E8 3DB，它将返回温度、云和描述。

两个api url分别是http://localhost:3030/locations和http://localhost:3030/weather

我将在底部发布我尝试过的代码，但我不确定如何进行下一步，或者我是否以正确的方式接近它。

当搜索字符串中包含像邮政编码一样的空格时，是否可以创建查询？

感谢任何帮助:)

JSON-server documentation

{
  "locations": [
    {
      "id": 145,"postcode": "E8 3DB","eastings": 533638,"northings": 184527,"country": "England","nhs_ha": "London","longitude": -0.074253,"latitude": 51.543824
    },{
      "id": 233,"postcode": "M5 3AA","eastings": 381457,"northings": 397673,"nhs_ha": "north West","longitude": -2.280845,"latitude": 53.475455
    },{
      "id": 314,"postcode": "B9 4BB","eastings": 408295,"northings": 286771,"nhs_ha": "West Midlands","longitude": -1.879291,"latitude": 52.478819
    },{
      "id": 144,"postcode": "EX1 3AB","eastings": 294187,"northings": 93121,"nhs_ha": "South West","longitude": -3.500568,"latitude": 50.728041
    }
  ],"weather": [
    {
      "id":2643743,"coord": {"lon":-0.07,"lat":51.54},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"base":"stations","main":{"temp":289.28,"feels_like":285.24,"temp_min":288.71,"temp_max":290.15,"pressure":1016,"humidity":77},"visibility":10000,"wind":{"speed":6.7,"deg":230},"clouds":{"all":90},"dt":1604060381,"sys":{"type":1,"id":1414,"country":"GB","sunrise":1604040660,"sunset":1604075829},"timezone":0,"name":"London"
    },{
      "id":2643123,"coord": {"lon":-2.28,"lat":53.48},"weather":[{"id": 500,"main": "Rain","description": "light rain","icon": "10n"}],"main":{"temp":285.76,"feels_like":284.05,"temp_min":285.15,"temp_max":285.93,"pressure":1012,"humidity":100},"wind":{"speed":3.6,"deg":270},"dt":1604060843,"id":1379,"sunrise":1604041483,"sunset":1604076019},"name":"Manchester"
    },{
      "id":3402721,"coord":{"lon":-1.88,"lat":52.48},"weather":[{"id": 800,"main": "Clear","description": "clear sky","icon": "01d"}],"main":{"temp":302.15,"feels_like":304.15,"temp_min":302.15,"temp_max":302.15,"pressure":1014,"humidity":70},"wind":{"speed":4.6,"deg":90,"gust":11.3},"clouds":{"all":40},"dt":1604061309,"id":8426,"sunrise":1604044422,"sunset":1604088963},"name":"Birmingham"
    },{
      "id":2015306,"coord":{"lon":-3.50,"lat":50.73},"weather":[{"id":602,"main":"SNow","description":"heavy sNow","icon":"13d"}],"main":{"temp":262.28,"feels_like":257.3,"temp_min":262.28,"temp_max":262.28,"pressure":1028,"humidity":96,"sea_level":1028,"grnd_level":1023},"visibility":628,"wind":{"speed":2.61,"deg":331},"clouds":{"all":100},"dt":1604061539,"sys":{"country":"GB","sunrise":1604016259,"sunset":1604038312},"timezone":32400,"name":"Exeter"
    }
  ]
}

到目前为止我的尝试......

import React,{ useEffect } from "react";
// import { isValid } from "postcode";

export default function PostcodeInputForm() {
  const [postcode,setPostcodeValue] = React.useState("");
  const [longitude,setLongitude] = React.useState("");
  const [latitude,setLatitude] = React.useState("");

  const storePostcode = (event) => {
    event.preventDefault();
    setPostcodeValue(event.target.value);
  };

// Error handling: If there isn't any response from the server return an error

  const checkResponse = (response) => {
    if (!response.ok) throw new Error(`Network error: ${response.status}`);
    return response.json();
  };

  const getLocations = () => {
    fetch("http://localhost:3030/locations")
    .then(checkResponse)
      .then((result) => {
        result.map((object) => {
          console.log(postcode);
          if (object.postcode == postcode) {
            
            setLongitude(object.longitude);
            setLatitude(object.latitude);
          }
        });
      })
  }

  useEffect(() => {
    getLocations();
  },[]);

  console.log(longitude,latitude);
  console.log(postcode);

  
  return (
    <form onSubmit={getLocations()}>
      <input
        placeholder="Enter your postcode... "
        type="text"
        className="postcode-search-bar"
        id="postcode"
        name="postcode"
        required
        value={postcode}
        onChange={storePostcode}
      />
      <button type="submit">Submit</button>
    </form>
  );
}