从两个相互依赖的 JSON 获取响应会产生错误 [React Hooks]

Question

我想先从ipstack.com下载用户所在城市的数据，然后利用这些信息生成天气 openweather.com。但是在render过程中出现如下问题：

Test.js:20 GET https://api.openweathermap.org/data/2.5/weather?lat=undefined&lon=undefined&units=metric&appid=(MY API KEY) 400 (Bad Request)

问题很奇怪，因为我需要的数据最终出现在状态中：

我的代码：

import React, { useState, useEffect } from 'react';

const Test = () => {
    const [place, setPlace] = useState([]);
    const [weather, setWeather] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        setLoading(false)
        fetch(`http://api.ipstack.com/check?access_key=(MY API KEY)`)
            .then(result => result.json())
            .then(json => {
                setPlace([json.latitude, json.longitude, json.region_name])
            })
            .catch(err => {
                console.log("Error " + err);
            })
    }, [])
    useEffect(() => {
        fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${place[0]}&lon=${place[1]}&units=metric&appid=(MY API KEY)`)
            .then(result => result.json())
            .then(json => {
                setWeather(json)
            })
            .catch(err => {
                console.log("Error " + err);
                setLoading(true);
            })
    }, [place])
    return (
        <>
            {loading && (
                <>
                    <p>{place[0]}</p>
                    <p>{place[1]}</p>
                    <p>{place[2]}</p>
                    <p>{weather.name}</p>
                </>
            )}
        </>
   );
}

export default Test;

Answer 1

我认为在第二个效果中你应该从 openweathermap.org 中获取数据，只有当 place 数组被分配并且有正确的数据时。否则在第一个运行您将发送无效数据（未定义而不是位置）

从两个相互依赖的 JSON 获取响应会产生错误 [React Hooks]

Getting responses from two interdependent JSON generates an error [React Hooks]

json

reactjs

react-hooks

use-effect

use-state