我正在try 获取一个农场的天气数据和经纬度坐标.我已经成功地将场数据从Api获取到了一个Reaction组件.现在我想用它的坐标来获取农场的天气数据.我用的是openweathermap
但问题是，我一直收到这个错误:GET http://api.openweathermap.org/data/2.5/weather?lat=undefined&lon=undefined&appid=[API]&units=metric 400 (Bad Request)
快来人帮帮忙
以下是场组件
import React, { useState, useEffect } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import Menubar from "../../components/menubar/Menubar";
import Skeleton from "react-loading-skeleton";
import toast, { Toaster } from 'react-hot-toast';
import axios from 'axios';
import { LazyLoadImage } from "react-lazy-load-image-component";
import Weather from "../../components/weather/Weather";
import FarmWeather from "../../components/weather/FarmWeather";
function FarmDetails() {
let navigate = useNavigate();
const [farm, setFarm] = useState('');
const { username } = useParams();
const { farmId } = useParams();
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
let isMounted = true;
axios.get(`/api/farm/${username}/${farmId}`).then(res => {
if (isMounted) {
if (res.data.status === 200) {
setFarm(res.data.farm);
setIsLoading(false);
console.warn(res.data.farm)
}
else if (res.data.status === 404) {
navigate('/');
toast.error(res.data.message, "error");
}
}
});
return () => {
isMounted = false
};
}, []);
return (
<div>
<Menubar />
<div className="appHeader bg-primary text-light">
<div className="left">
<a onClick={() => navigate(-1)} className="headerButton goBack">
<i className="fi fi-rr-angle-left"></i> </a>
</div>
<div className="pageTitle">{farm.farmname}</div>
<div className="right"></div>
</div>
<div id="appCapsule">
<div className="section mt-3 mb-3">
<div className="card">
<div className="card-header">
Discover
</div>
<div className="card-body">
<h5 className="card-title">Farm Supplies</h5>
<p className="card-text">Order for farm supplies suitable for your farm and grow healthy fruits</p>
<a href="shop.php" className="btn btn-primary spinner-btn">Go to Shop</a>
</div>
</div>
</div>
<FarmWeather farm={farm} />
<div className="section mt-3 mb-3">
<div className="row">
<div className="col-6">
<div className="card card-normal">
<div className="card-body">
<h5 className="card-title title-small mb-2">Location</h5>
<div className="card-icon mb-0">
<i className="fi fi-rr-marker"></i>
</div>
</div>
</div>
</div>
<div className="col-6">
<div className="card card-normal card-add">
<a href="farm-fruits.php?view=<?php echo $row['farmid']; ?>">
<div className="card-body">
<h5 className="card-title title-small mb-2">Fruits</h5>
<div className="card-icon mb-0">
<i className="fi fi-rr-apple-whole"></i>
</div>
</div>
</a>
</div>
</div>
<div className="col-6">
<div className="card card-normal">
<div className="card-body">
<h5 className="card-title title-small mb-2">Sales</h5>
<div className="card-icon mb-0">
<i className="fi fi-rr-bolt"></i>
</div>
</div>
</div>
</div>
<div className="col-6">
<div className="card card-normal">
<div className="card-body">
<h5 className="card-title title-small mb-2">Expenses</h5>
<div className="card-icon mb-0">
<i className="fi fi-rr-settings"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default FarmDetails;和天气组件
import React, { useState, useEffect } from "react";
const FarmWeather = ({ farm }) => {
const [weather, setWeather] = useState({});
useEffect(() => {
fetch(`//api.openweathermap.org/data/2.5/weather?lat=${farm.latitude}&lon=${farm.longitude}&appid=[API]&units=metric`)
.then((result) => result.json())
.then((weather) => {
setWeather(weather);
});
}, []);
console.warn("result", weather)
return (
<div className="section mt-3 mb-3">
<div className="card text-white bg-primary mb-2">
<div className="card-header">Weather in <span>{weather.name}</span>
<div className="weather-icon">
<img src={`http://openweathermap.org/img/w/${weather.weather && weather.weather[0].icon}.png`} alt="weather icon" />
</div>
</div>
<div className="card-body">
<h5 className="card-title">Temp <span>{weather.main && weather.main.temp} °C</span></h5>
<p className="card-text">Our Technologies have discovered that the Current Weather around your Farm in {farm.county && farm.county.countyname} is
Mostly
<span id="description" ></span>
</p>
</div>
</div>
</div>
);
}
export default FarmWeather;