Question

嗨，我建立了气象应用程序，所以我有：

Location.js

export const promiseLocation = () => {
    return new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(position => {
            resolve(position)
        })
    }) 
}

上下文：

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

export const InitialWeatherContext = createContext();

const InitialWeatherContextProvider = (props) => {
    const [initialWeather, setInitial] = useState({
        city: null,
        temp: null
    })

    const fillData = (city, temp) => {
        setInitial({
            city,
            temp
        })
        
    }
    return (
        <InitialWeatherContext.Provider value={{initialWeather, fillData}}>
            {props.children}
        </InitialWeatherContext.Provider>
    )
}

export default InitialWeatherContextProvider

要更新上下文的组件：

import React, { useRef, useEffect, useContext } from 'react';
import { ReactComponent as Scene} from '../scene.svg'
import gsap from 'gsap';
import Language from './Laungage';
import { InitialWeatherContext } from '../context/InitialWeatherContext'
import { promiseLocation } from './Location'
import axios from 'axios'



const Home = () => {
    const { fillData } = useContext(InitialWeatherContext)

    useEffect(() => {
      const getLocation = async () => {
        const { coords } = await promiseLocation()
        let latitude = coords.latitude;
        let longitude = coords.longitude
        const res = await axios.get(`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${KEY}`)
        
     }
     getLocation()
  })

    const wrapper = useRef(null)

  useEffect(() => {
    const [elements] = wrapper.current.children;

    const person = elements.getElementById('person');
    const bucket  = elements.getElementById('bucket');
    const tiles = elements.getElementById('tiles');
    const whiterect = elements.getElementById('whiterect');
    const weather = elements.getElementById('weather');
    const weatherrect = elements.getElementById('weatherrect');
    const array = elements.getElementById('array');
    const footer = elements.getElementById('footer');
    const background = elements.getElementById('background');
    

    gsap.set([person, bucket, ...tiles.children, whiterect, weather, weatherrect, array, footer, background], {autoAlpha: 0})
    
    gsap.set(array, {transformOrigin: '50% 100%'})
    gsap.set(weather, {transformOrigin: '50% 100%'})
    

    const tl = gsap.timeline({ defaults: {ease: 'power3.inOut'}});

    tl.fromTo(person, {x: '-=300'}, {duration: 1, x: '+=300', autoAlpha: 1})
      .fromTo(array, {scaleY: 0}, {duration: 2, scaleY: 1, autoAlpha: 1})
      .fromTo(weatherrect, {}, {duration: 1, autoAlpha: 1})
      .fromTo(whiterect, {}, {duration: 1, autoAlpha: 1})
      .fromTo(weather, {scaleY: 0}, {duration: 1, scaleY: 1, autoAlpha: 1})
      .fromTo(background, {}, {duration:1 , autoAlpha: 1})
      .to(footer, {duration: 1, autoAlpha: 1})
      .to(tiles.children, {duration: 2, autoAlpha: 1, stagger: 0.1})
      .to(bucket, {duration: 1, autoAlpha: 1})
      
  })

    return (
        <div ref={wrapper} className="Svg-Animation">
            <Scene />
            <Language />
        </div>
    )
}

export default Home;

我想知道为什么在'const res = axios.get（API）之后，我使用fillData（res.data.name，res.data.main.temp）我的整个组件都出错了，我的动画没有显示，当我尝试console.log更新状态时，出现类似console.log状态的循环，而我的页面仍未加载任何内容

用异步反应useEffect并等待

0 个答案: