Бесконечный запрос API. Зачем? - PullRequest
Новая
       8

Бесконечный запрос API. Зачем?

0 голосов
/ 24 июня 2018

Я создаю приложение погоды и использую API openweathermap.Я получаю данные из API, но сеть в консоли показывает бесконечный запрос

Мой код React 

class CityWeather extends Component {
  constructor(props){
    super(props)
    this.state = {
      city: "",
      temp: "",
      date: "Today"
    }
  }

  render() {
    const fetchWeatherData = location => {
        const url = 'http://api.openweathermap.org/data/2.5/forecast?q='+location+'&units=metric&APPID=65ea63d33ba78059603a85cba8c80620';
        fetch(url).then(res =>
          res.json()
        ).then(data => {
          this.setState({
            city: data.city.name,
            temp: data.list[0].main.temp
          })
        })
      }

    return (
      <div>
        {fetchWeatherData(this.props.name)}
        <div>{this.state.city}</div>
        <div>{this.state.date}</div>
        <div>{this.state.temp}</div>

      </div>
    )
  }
}

1 Ответ

0 голосов
/ 24 июня 2018

Вы получаете данные о погоде каждый раз, когда происходит рендеринг. Когда вы получаете ответ, вы изменяете состояние компонента с помощью setState, что вызывает повторную визуализацию и, следовательно, приводит к бесконечному циклу.

Пожалуйста, смотрите этот пост также: Как правильно сделать вызов API в реагировать JS?

Вместо этого вы должны получать данные о погоде, когда компонент монтируется, что происходит только один раз. См. componentDidMount в документах. 

class CityWeather extends Component {
    constructor(props){
        super(props)
        this.state = {
            city: "",
            temp: "",
            date: "Today"
        }
    }

    componentDidMount() {
        const fetchWeatherData = location => {
            const url = 'http://api.openweathermap.org/data/2.5/forecast?q='+location+'&units=metric&APPID=65ea63d33ba78059603a85cba8c80620';
            fetch(url)
                .then(res => res.json())
                .then(data => {
                    this.setState({
                        city: data.city.name,
                        temp: data.list[0].main.temp
                    })
                })
        };
        fetchWeatherData(this.props.name);
    }

    render() {
        return (
            <div>
                <div>{this.state.city}</div>
                <div>{this.state.date}</div>
                <div>{this.state.temp}</div>
            </div>
        )
    }
}
...