React Как использовать состояние в другом компоненте - PullRequest
Новая
       48

React Как использовать состояние в другом компоненте

1 голос
/ 21 июня 2020

Кто-нибудь знает, почему мое состояние не обновляется Это мой контекст: 

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

export const WeatherDataContext = createContext();

const WeatherDataContextProvider = (props) => {
    const [weather, setWeather] = useState(
        {
            city: null,
            temp: null
        }
    )
    const addWeather = (city, temp) => {
        setWeather({
            city,
            temp
        })
    }
    
    return (
        <WeatherDataContext.Provider value={{weather, addWeather}}>
            {props.children}
        </WeatherDataContext.Provider>
    )
}

export default WeatherDataContextProvider

И моя форма, в которой я передаю данные из ax ios в функцию addWeather: 

import React, {useContext, useState} from 'react';
import { WeatherDataContext } from '../context/WeatherDataContext';
import axios from 'axios'
import {Link} from 'react-router-dom'


const WeatherForm = () => {
    const {addWeather} = useContext(WeatherDataContext);
    const [value, setValue] = useState('')

    const handleChange = (e) => {
        e.preventDefault();
        axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${value}&appid=${KEY}&units=metric`)
            .then(res => {
                
                addWeather({
                    city: res.data.name,
                    temp: res.data.main.temp
               });
                
            })
        
    }


    return (
        <div class='weather-form'>
            <form onSubmit={handleChange}>
                <input placeholder='Wpisz miasto' onChange={(e) => setValue(e.target.value)} value={value} required/>
                <Link to='/weather'><button>Wyszukaj</button></Link>
                
            </form>
        </div>
    )
}

export default WeatherForm

После того, как я обновлю свое состояние в контексте, я хочу использовать эти данные в другом компоненте, например: 

import React, {useContext, useState} from 'react';
import { WeatherDataContext } from '../context/WeatherDataContext';

const WeatherFront = () => {
    const {weather} = useContext(WeatherDataContext)
    
    console.log(weather)
    return (
        <div class='weather-front'>
            <h1>City: {weather.city}, Temperatura: {weather.temp}</h1>
        </div>
    )
}

export default WeatherFront

Подводя итог, я не знаю, почему, но мое состояние не обновляется, а мой компонент погоды возвращает только null из начального состояния 

import React from 'react';
import WeatherDataContextProvider from '../context/WeatherDataContext'
import WeatherFront from '../components/WeatherFront';


const Weather = () => {
    return (
        <div class='weather'>
            <WeatherDataContextProvider>
                <WeatherFront />
            </WeatherDataContextProvider>
        </div>
    )
}

export default Weather

1 Ответ

1 голос
/ 21 июня 2020

WeatherDataContext имеет значения как weather и addWeather, а не changeCity и changeWeather

Вам необходимо использовать его надлежащим образом 

const {addWeather} = useContext(WeatherDataContext);
const handleChange = (e) => {
        e.preventDefault();
        axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${value}&appid=${KEY}&units=metric`)
            .then(res => {
                
                addWeather({
                     city: res.data.name,
                     temp: res.data.main.temp
                });
            })
        
    }
...