Question

我编写了一些代码并可以工作，但我认为也许可以采用更好的方法来完成。我想从代码中得到什么？我创建链接并从该对象获取对象，我想使用某个值，并在获取新对象后将该值传递到另一个链接中。我的代码正常工作，但我想看看是否有可能采用新的解决方案。

const [key, setKey] = useState("");
const [data, setData] = useState([]);

useEffect(() => { 
    getKey();
    getWeather();
},[key]);

//此函数从对象获取密钥，而该密钥我将在另一个链接中使用

const getKey = () => {
    navigator.geolocation.getCurrentPosition(

        (position) => {
            const long = JSON.stringify(position.coords.longitude);
            const lat = JSON.stringify(position.coords.latitude);

            const proxy = `https://cors-anywhere.herokuapp.com/`;
            const link = `${proxy}http://dataservice.accuweather.com/locations/v1/cities/geoposition/search?apikey=rhlYEhvAu0nhFNMFybOIhffbmjFX0AZN&q=${lat}%2C${long}&details=true`;

            (async function fetchData(){
                const getValue = await fetch (link);
                const key = await getValue.json();
                setKey(key.Key);
            })();
        }
     );
};

const getWeather = async () => {
    const proxy = `https://cors-anywhere.herokuapp.com/`;
    const link = `${proxy}http://dataservice.accuweather.com/forecasts/v1/daily/5day/${key}?apikey=rhlYEhvAu0nhFNMFybOIhffbmjFX0AZN&details=true&metric=true`;
    const data = await fetch (link);
    const getData = await data.json();
    setData(getData);
};

Answer 1

只需对代码稍作更改即可完成此工作。执行useEffect和async函数，将键从getKey返回到变量，然后等待变量分配并传递给getWeather。像这样：

const [key, setKey] = useState("");
const [data, setData] = useState([]);

useEffect(async() => { // <---- Converted to async
    const apiKey = getKey(); // <---- Assigned to variable
    getWeather(await apiKey); // <--- Using apiKey in function rather than just state
},[key]);

const getKey = () => {
    navigator.geolocation.getCurrentPosition(

        (position) => {
            const long = JSON.stringify(position.coords.longitude);
            const lat = JSON.stringify(position.coords.latitude);

            const proxy = `https://cors-anywhere.herokuapp.com/`;
            const link = `${proxy}http://dataservice.accuweather.com/locations/v1/cities/geoposition/search?apikey=rhlYEhvAu0nhFNMFybOIhffbmjFX0AZN&q=${lat}%2C${long}&details=true`;

            (async function fetchData(){
                const getValue = await fetch (link);
                const key = await getValue.json();
                setKey(key.Key);
                return key.Key     //<------ returned key for useEffect
            })();
        }
     );
};

const getWeather = async (apiKey = key) => { // <----If no value passed to function, will use state value
    const proxy = `https://cors-anywhere.herokuapp.com/`;
    const link = `${proxy}http://dataservice.accuweather.com/forecasts/v1/daily/5day/${apiKey}?apikey=rhlYEhvAu0nhFNMFybOIhffbmjFX0AZN&details=true&metric=true`;
    const data = await fetch (link);
    const getData = await data.json();
    setData(getData);
};

我返回值而不使用状态的原因是因为设置状态是异步的，并且useState设置函数目前没有像setState那样的回调函数。

使用fetch对象中的日期创建链接以获取react中的另一个对象

1 个答案: