React - Использование состояния в компоненте с помощью useContext

Question 1

Здравствуйте, я застрял во время создания приложения с использованием хуков. Я не знаю, почему, но мой компонент не загружает состояние из моего компонента контекста или, возможно, мое исходное состояние не обновляется правильно. Кто-нибудь знает, что происходит?

Компонент контекста:

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

Форма - аксиомы - Компонент:

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(res.data.name, res.data.main.temp)
                
            })
      
    }

    return (
        <div class='weather-form'>
            <form onSubmit={handleChange}>
                <input placeholder='City' onChange={(e) => setValue(e.target.value)} value={value} required/>
                <Link to='/weather'><button>Search</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

reactjs

0

Bachi 23 Июн 2020 в 21:14

Answer

Ваша кнопка не отправляет форму - вместо этого она уходит со страницы. Итак, handleChange не вызывается.

Вы можете вызвать его с помощью кнопок onClick вместо форм onSubmit. Обязательно опустите e.preventDefault(), чтобы по родительской ссылке можно было перемещаться.

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

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

  return (
    <div class="weather-form">
      <form >
        <input
          placeholder="City"
          onChange={(e) => setValue(e.target.value)}
          value={value}
          required
        />
        <Link to="/weather">
          <button onClick={handleChange}>Search</button>
        </Link>
      </form>
    </div>
  )
}

Обязательно заключите обе страницы в один контекст:

<WeatherDataContextProvider>
        <Router>
          <Switch>
            <Route path="/weather">
              <WeatherFront></WeatherFront>
            </Route>
            <Route path="/">
              <WeatherForm></WeatherForm>
            </Route>
          </Switch>
        </Router>
</WeatherDataContextProvider>

0

Damir 24 Июн 2020 в 09:56

Question 2

Ваша кнопка не отправляет форму - вместо этого она уходит со страницы. Итак, handleChange не вызывается.

Вы можете вызвать его с помощью кнопок onClick вместо форм onSubmit. Обязательно опустите e.preventDefault(), чтобы по родительской ссылке можно было перемещаться.

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

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

  return (
    <div class="weather-form">
      <form >
        <input
          placeholder="City"
          onChange={(e) => setValue(e.target.value)}
          value={value}
          required
        />
        <Link to="/weather">
          <button onClick={handleChange}>Search</button>
        </Link>
      </form>
    </div>
  )
}

Обязательно заключите обе страницы в один контекст:

<WeatherDataContextProvider>
        <Router>
          <Switch>
            <Route path="/weather">
              <WeatherFront></WeatherFront>
            </Route>
            <Route path="/">
              <WeatherForm></WeatherForm>
            </Route>
          </Switch>
        </Router>
</WeatherDataContextProvider>

0

Damir 24 Июн 2020 в 09:56

React - Использование состояния в компоненте с помощью useContext

1 ответ

Похожие вопросы

Новые вопросы

reactjs