Блог

Я создал приложение погоды с помощью react. Я использую openweathermap.org для получения данных. Пользователь вводит почтовый индекс. Этот почтовый индекс используется для получения lat/long, который затем получает прогноз погоды. Я хотел бы выполнять свою выборку api в узле, а не реагировать, поэтому мой ключ API скрыт, если кто-то использует инструмент проверки своего браузера. После того, как пользователь введет почтовый индекс, как я могу перенести эти данные в узел, чтобы выполнить выборку на стороне сервера, а не в react? И как мне переместить результат обратно, чтобы отреагировать, чтобы отобразить результат. Спасибо вам за вашу помощь.

Weather.js

 import React, {useState, useEffect} from "react"
import Button from "./Button"
const API_KEY = process.env.REACT_APP_API_KEY
  
function Weather() {
  const [loading, setLoading] = useState(false)
  const [maxTemp0, setMaxTemp0] = useState([])
  const [lat, setLat] = useState("34")
  const [long, setLong] = useState("-118")
  const [zip, setZip] = useState("90210")

  useEffect(()=>{ 
      fetch("https://api.openweathermap.org/geo/1.0/zip?zip="  zip  ",USamp;appid="  API_KEY  "")
      .then(res => res.json())
      .then((result) => {
//  Set new lat/long from zip fetch
      setLat(result.lat)
      setLong(result.lon)
      console.log(lat)
      console.log(long)
      console.log(zip)
      console.log(result)
    })
    }, [zip, lat, long])

    useEffect(()=>{       
      fetch("https://api.openweathermap.org/data/2.5/onecall?lat="  lat  "amp;lon="  long  "amp;units=imperialamp;exclude=current,minutely,hourly,alertsamp;appid="  API_KEY  "")
      .then(res => res.json())
      .then((data) => {
//   Set weather data from weather fetch
      setMaxTemp0(data.daily[0].temp.max)
    })
  }, [lat, long]) 

  if(loading === true){
    return <div>Loading...</div>
  } else return( 
    <div>
    <Button zip={setZip} /> <br />
    High: {Math.round(maxTemp0)} 
    </div>
  )
}

export default Weather
 

Button.js

 import React, {useState} from "react"

function Button(props) {
  
  const [zip, setZip] = useState([])

  const handleSubmit = (event) => { 
    console.log(zip)
    props.zip(`${zip}`)
    event.preventDefault();
  }

  return(
    <div>
    <input placeholder="Zip Code" type="number" min="0" max="99999" value={zip} onChange={(e) => setZip(e.target.value)} />
    <button onClick={handleSubmit}>Submit</button>
    </div>
  )
}


export default Button
 

server.js

 const express = require("express")
const app = express()
const path = require("path")
const port = process.env.PORT || 5000


app.use("/weather",express.static(path.join("weather/build")))

app.use("/",express.static(path.join("portfolio")))

app.listen(port, () => console.log("Working"))