ReactJS调用openweathermap报wrong latitude，如何获取农场坐标天气？

核心问题分析 #

• 拼写错误：代码里的latitute是拼写失误，正确字段名应为latitude，错误拼写会导致传递给API的纬度参数值为undefined。
• 执行时机问题：第二个useEffect依赖数组为空，会在组件挂载时立即执行，此时farm还是初始空对象，经纬度字段未被赋值，同样会传递无效参数给API。

修正后的代码 #

function FarmDetails() {
    let navigate = useNavigate();
    const [farm, setFarm] = useState({});
    const [weather, setWeather] = useState({});
    const { username, 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);
                }
                else if (res.data.status === 404) {
                    navigate('/');
                    toast.error(res.data.message, "error");
                }
            }
        }).catch(err => {
            if (isMounted) {
                setIsLoading(false);
                toast.error('获取农场信息失败', "error");
            }
        });

        return () => {
            isMounted = false
        };
    }, [username, farmId, navigate]);

    useEffect(() => {
        if (farm.latitude && farm.longitude) {
            fetch(`//api.openweathermap.org/data/2.5/weather?lat=${farm.latitude}&lon=${farm.longitude}&appid=[APIKEY]&units=metric`)
                .then((result) => {
                    if (!result.ok) {
                        throw new Error('天气请求失败');
                    }
                    return result.json();
                })
                .then((weatherData) => {
                    setWeather(weatherData);
                })
                .catch(err => {
                    console.error('获取天气数据出错:', err);
                });
        }
    }, [farm]);

    console.warn("result", weather);

    if (isLoading) {
        return <div>加载中...</div>;
    }
    return (
        <div>
            {/* 这里放农场详情和天气展示的JSX内容 */}
        </div>
    );
}

关键修正点说明 #

• 修正拼写错误：将latitute改为latitude，确保能正确读取农场的纬度值。
• 调整执行时机：第二个useEffect依赖数组改为[farm]，农场数据更新后才触发天气API请求；同时增加经纬度存在的判断，避免传递无效参数。
• 补充依赖数组：第一个useEffect添加username、farmId、navigate作为依赖，符合React Hooks规则，避免闭包问题。
• 增加错误处理：给axios和fetch添加错误捕获逻辑，方便排查问题并给用户反馈。
• 补充加载状态渲染：添加加载中提示和基础JSX结构，避免组件报错。

内容的提问来源于stack exchange，提问作者John Mark