变量不会在 API link ReactJS 上更新

Question

我在 API link 上更新变量时遇到问题。所以这应该起作用，在这个 API link 的起始坐标应该是 0,0（或者在最好的情况下它应该首先显示 geonavigator window 并且在接受它之后它应该显示你的坐标的天气然后在同一个地方搜索另一个城市后应该出现搜索城市的天气但仍然不知道如何去做）并且这部分有效但是在我在搜索栏上搜索另一个城市之后[= 22上的坐标=] link (coordinates.lat 和 coordinates.lng) 应该更改为搜索城市的坐标，并且更改后的天气应该显示在屏幕上，但这部分不起作用。可能有点效果，因为看起来 coordinates.lat 和 coordinates.lng 的值在每次我搜索任何城市时都在变化，当我在 <p>Latitude: {coordinates.lat}</p> <p>Longtitude: {coordinates.lng}</p> 的 return 之后显示它们时，但天气不是根本没有改变，它仍然显示为 0,0 坐标。很抱歉我的代码乱七八糟，但我还在学习。而且我说的第一个 api link 即 const api = ${proxy}https://api.darksky.net/forecast/1539bbb708779eef3993021296196cb2/${coordinates.lat},${coordinates.lng}；

    import React, { useEffect, useState, } from "react";
import "./PogodaL.css";
import "./PogodaS.css";
import "./PogodaP.css";
import Skycons from "react-skycons"; 
import "./App.css";
import lupa from "./lupa.png";
import PlacesAutocomplete,{
  geocodeByAddress,
  getLatLng
} from "react-places-autocomplete";



export function App2() {
  const [state, setState] = useState({
    long: null,
    lat: null,
    precipProbability: "",
    temperatureDegree: 0,
    locationTimezone: "",
    minimalna: 0,
    maksymalna: 0,
    icons: ""
  });
  const [state2, setState2] = useState({
    long: null,
    lat: null,
    precipProbability: "",
    temperatureDegree: 0,
    locationTimezone: "",
    minimalna: 0,
    maksymalna: 0,
    icons: ""
  });

  const [state3, setState3] = useState({
    long: null,
    lat: null,
    precipProbability: "",
    temperatureDegree: 0,
    locationTimezone: "",
    minimalna: 0,
    maksymalna: 0,
    icons: ""
  });

  const [state4, setState4] = useState({
    long: null,
    lat: null,
    precipProbability: "",
    temperatureDegree: 0,
    locationTimezone: "",
    minimalna: 0,
    maksymalna: 0,
    icons: ""
  });

  const [address, setAddress] = useState(""); /* here is the start of defining variables */
  const [coordinates, setCoordinates] = useState({ 
      lat: 0, 
      lng: 0});

  const handleSelect = async (value) => {
      const results = await geocodeByAddress(value);
      const latLng = await getLatLng(results[0]);
      setAddress(value);
      setCoordinates(latLng);
  }


  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        const lat = position.coords.latitude;
        const long = position.coords.longitude;
        setState({
          ...state,
          lat,
          long
        });

        const proxy = "https://cors-anywhere.herokuapp.com/";
        const api = `${proxy}https://api.darksky.net/forecast/1539bbb708779eef3993021296196cb2/${coordinates.lat},${coordinates.lng}`;  /* here is that API Link*/

        fetch(api)
          .then(response => {
            return response.json();
          })
          .then(data => {
            console.log(data);
            const { temperature, precipProbability, icon } = data.currently;

            const celcjusz = ((temperature - 32) * 5) / 9;

            const { temperatureLow } = data.daily.data[1];
            const celcjusz1 = ((temperatureLow - 32) * 5) / 9;

            const { temperatureMax } = data.daily.data[1];
            const celcjusz2 = ((temperatureMax - 32) * 5) / 9;

            setState({
              ...state,

              temperatureDegree: Math.floor(celcjusz),
              locationTimezone: data.timezone,
              minimalna: Math.floor(celcjusz1),
              maksymalna: Math.floor(celcjusz2),
              precipProbability: precipProbability.toString().replace(/0.0/g, '').replace(/0./g,''), 
              icons: icon.replace(/-/g, "_").toUpperCase() 
            });

          });
          const apiL = `${proxy}https://api.darksky.net/forecast/1539bbb708779eef3993021296196cb2/50,23` ;
          fetch(apiL)
          .then(response => {
            return response.json();
          })
          .then(data => {
            console.log(data);
            const { temperature, precipProbability, icon } = data.currently;

            const celcjusz = ((temperature - 32) * 5) / 9;

            const { temperatureLow } = data.daily.data[1];
            const celcjusz1 = ((temperatureLow - 32) * 5) / 9;

            const { temperatureMax } = data.daily.data[1];
            const celcjusz2 = ((temperatureMax - 32) * 5) / 9;

            setState2({
              ...state2,
              precipProbability: precipProbability.toString().replace(/0.0/g, '').replace(/0./g,''), 
              temperatureDegree: Math.floor(celcjusz),
              locationTimezone: data.timezone,
              minimalna: Math.floor(celcjusz1),
              maksymalna: Math.floor(celcjusz2),
              icons: icon.replace(/-/g, "_").toUpperCase()            
            });         
          });

          const apiS = `${proxy}https://api.darksky.net/forecast/1539bbb708779eef3993021296196cb2/52.50,13.28` ;
          fetch(apiS)
          .then(response => {
            return response.json();
          })
          .then(data => {
            console.log(data);
            const { temperature, precipProbability, icon } = data.currently;

            const celcjusz = ((temperature - 32) * 5) / 9;

            const { temperatureLow } = data.daily.data[1];
            const celcjusz1 = ((temperatureLow - 32) * 5) / 9;

            const { temperatureMax } = data.daily.data[1];
            const celcjusz2 = ((temperatureMax - 32) * 5) / 9;

            setState3({
              ...state3,
              precipProbability: precipProbability.toString().replace(/0.0/g, '').replace(/0./g,''), 
              temperatureDegree: Math.floor(celcjusz),
              locationTimezone: data.timezone,
              minimalna: Math.floor(celcjusz1),
              maksymalna: Math.floor(celcjusz2),
              icons: icon.replace(/-/g, "_").toUpperCase()            
            });         
          });
          const apiP = `${proxy}https://api.darksky.net/forecast/1539bbb708779eef3993021296196cb2/40.69,-74.11`;
          fetch(apiP)
          .then(response => {
            return response.json();
          })
          .then(data => {
            console.log(data);
            const { temperature, precipProbability, icon } = data.currently;

            const celcjusz = ((temperature - 32) * 5) / 9;

            const { temperatureLow } = data.daily.data[1];
            const celcjusz1 = ((temperatureLow - 32) * 5) / 9;

            const { temperatureMax } = data.daily.data[1];
            const celcjusz2 = ((temperatureMax - 32) * 5) / 9;

            setState4({
              ...state4,
              precipProbability: precipProbability.toString().replace(/0.0/g, '').replace(/0./g,''), 
              temperatureDegree: Math.floor(celcjusz),
              locationTimezone: data.timezone,
              minimalna: Math.floor(celcjusz1),
              maksymalna: Math.floor(celcjusz2),
              icons: icon.replace(/-/g, "_").toUpperCase()            
            });         
          });

      });
    }
  }, []);
  return (

    <div className="App">
      <div>
        <PlacesAutocomplete 

        value={address} 
        onChange={setAddress} 
        onSelect={handleSelect}
        >{({getInputProps, suggestions, getSuggestionItemProps, loading}) => (
        <div class="Search-Bar">
            <p>Latitude: {coordinates.lat}</p> {/* I display it there and it changed everytime I search for any city so this works there */} 
            <p>Longtitude: {coordinates.lng}</p>

            <input {...getInputProps({placeholder: "Wpisz lokalizację"})} />
            <button type="submit"><img src={lupa} /></button>


            {suggestions.map((suggestion) => {
                const style = {
                    backgroundColor: suggestion.active ? "#41b6e6" : "#e6eeff"
                }
               return ( <div {...getSuggestionItemProps(suggestion, { style })} class="Suggestion"> {suggestion.description} </div> 
               )
               }  
             )
            }

        </div> 
        )
        }


        </PlacesAutocomplete>
    </div>

      <div class="location">
  <h1 class="location-timezone"> {state.locationTimezone} </h1> </div>
       <div class="icon"> <Demo icons={state.icons} /> </div>

      <div class="temperature">
        <div class="degree-section">
          <span> {state.temperatureDegree}°C </span>
        </div>
        <div class="precipProbability">
          {"Szansa opadów: "}
          {state.precipProbability}{"% "}
        </div>
      </div>

      <div class="sekcja-jutro">
        <h1>Pogoda na Jutro: </h1>
      </div>

      <div class="minimalna">
        <span> Temperatura minimalna:</span>
        <h1 class="temperatura-minimalna"> {state.minimalna} </h1>
        <span> °C </span>
      </div>

      <div class="maksymalna">
        <span>Temperatura maksymalna:</span>
        <h1 class="temperatura-maksymalna"> {state.maksymalna}</h1>
        <span>°C</span>
      </div>


      <div class="locationL">
  <h1 class="location-timezoneL"> {state2.locationTimezone} </h1> </div>



      <div class="temperatureL">
        <div class="degree-sectionL">
        <div class="iconL"><Demo icons={state2.icons} />  </div>  
          <span> {state2.temperatureDegree}°C </span>
        </div>
        <div class="temperature-descriptionL">
          {"Szansa opadów: "}
          {state2.precipProbability}{"%"}
        </div>
      </div>  

      <div class="locationS">
  <h1 class="location-timezoneS"> {state3.locationTimezone} </h1> </div>      
      <div class="temperatureS">
        <div class="degree-sectionS">
        <div class="iconS"><Demo icons={state3.icons} />  </div>  
          <span> {state3.temperatureDegree}°C </span>
        </div>
        <div class="temperature-descriptionS">
          {"Szansa opadów: "}
          {state3.precipProbability}{"%"}
        </div>
      </div>  

      <div class="locationP">
  <h1 class="location-timezoneP"> {state4.locationTimezone} </h1> </div>      
      <div class="temperatureP">
        <div class="degree-sectionP">
        <div class="iconP"><Demo icons={state4.icons} />  </div>  
          <span> {state4.temperatureDegree}°C </span>
        </div>
        <div class="temperature-descriptionP">
          {"Szansa opadów: "}
          {state4.precipProbability}{"%"}
        </div>
      </div> 

    </div>





  );
}

class Demo extends React.Component {
  render() {
    return (
      <Skycons

        color="white"
        icon={this.props.icons} 
        autoplay={true}
        height="130"
      />
    );
  }
}
export default App2;

Answer 1

当 loads/mounts 组件

时，它只会被调用一次

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

您可以将 coordinates 作为依赖项传递，因此只要 coordinates

发生变化，就会调用 useEffect

useEffect(() => {
     ...
},[coordinates]); // <----- HERE

变量不会在 API link ReactJS 上更新

Variable wont update on API link ReactJS

javascript

api

variables

weather

reactjs