Реагировать не обновляя состояние при получении данных API с помощью хуков - PullRequest
Новая
       5

Реагировать не обновляя состояние при получении данных API с помощью хуков

0 голосов
/ 06 января 2020

Я пытаюсь реализовать вызовы API через хуки, но я не знаю, почему состояние не обновляется. Может ли кто-нибудь взглянуть на это и сказать мне причину: 

import React,{useState} from 'react';

function Weather(){
    var [weat,setWeat]=useState({city:'',report:[]})
    var UpdateCity = event =>{
        setWeat({...weat,city:event.target.value});
    }
    var UpdateReport = event =>{
        var addr="http://api.openweathermap.org/data/2.5/weather?q="+weat.city+"&appid=04e"
        console.log(addr);
        fetch(addr)
        .then(res=>res.json())
        .then(res=>{
            setWeat({...weat,report:res});
        });

    }
    return(
        <>
            <h1>Welcome to my weather App</h1>
            <h3>Please enter your city</h3>
            <input type='text' onChange={UpdateCity} placeholder='Enter your City'></input>
            <input type='submit' onClick={UpdateReport}></input>
        </>
    )
}

export default Weather;

Ответы [ 3 ]

1 голос
/ 06 января 2020

Вы не передаете ключ для аутентификации, поэтому он в основном приводит к ошибке, поскольку вы не обрабатываете ошибки, поэтому вы его не видите

Так что вам нужно обновить следующим образом и передать введите URL-адрес для получения данных.

Помимо этого код выглядит нормально 

var UpdateReport = event =>{
        var addr="http://api.openweathermap.org/data/2.5/weather?q="+weat.city+"&appid=04e"
        console.log(addr);
        fetch(addr)
        .then(res=>res.json())
        .then(res=>{
            setWeat({...weat,report:res});
        })
        .catch(error => {
          console.log(error)
        })

    }

Обновление

Таким образом, проблема не заключалась в обновлении состояние, была проблема cors. Смотрите рабочие коды и коробку с примером API здесь ,

0 голосов
/ 06 января 2020

Я просто скопировал ваш код на локальный компьютер, добавил свой собственный ключ API и работает из коробки. При тестировании приложения откройте консоль chrome и проверьте наличие ошибок при извлечении данных, чтобы выяснить, есть ли у вас ошибка в запросе.

Также ваш запрос может работать, и вы не видите компонент повторно визуализируется, так как вы не используете weat объект внутри return, пожалуйста добавьте немного журнала перед возвратом просто так: 

   console.log("weat.city: ", weat.city, " weat.report: ", weat.report)
   return (
      . . . 
   )

Так что теперь вы увидите, изменится состояние или нет .

0 голосов
/ 06 января 2020

Вам просто не хватает s в URL вашего API. Я считаю, что вызовы работают только через HTTPS 

https://api.openweathermap.org/.....

Также, как упоминает @DILEEP THOMAS, лучше добавить блок catch, который поможет вам понять, почему выборка не работает должным образом. 

.catch(err => console.log(err.message))
...