Состояние не получает данные API при отправке

Question

Первая запись stackoverflow. Новичок в React (1 неделя) и использование запросов на выборку API для понимания свойств, состояния и компонентов.

Я использую API погоды, чтобы получить температуру для конкретного города. Пользователь вводит город в форму, нажимает кнопку «Отправить», и отображается температура.

Когда я жестко кодирую состояние selectedCity, набирая город в качестве теста, я вижу в DevTools, что данные API получены для этот город и городская температура отображаются в браузере. Проблема в том, что я нажимаю кнопку «Отправить» в компоненте формы. При отправке я вижу в DevTools, что он обновляет состояние selectedCity с выбранным пользователем городом, но не извлекает данные. Я заметил, что при жестком кодировании в городе страница обновляется, данные извлекаются и отображается результат, но при отправке через форму refre sh страницы отсутствует.

Я просто не делаю ' Я знаю достаточно о React, чтобы понять, что здесь происходит. Благодарен за любые указатели.

Это мой WeatherContainer

import React, { Component } from 'react';
import Headings from '../components/Headings';
import Form from '../components/Form';
import Weather from '../components/Weather';


class WeatherContainer extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            weatherData: [],
            selectedCity: ""     
        };
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
    }

    fetchData() {
            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${this.state.selectedCity}&APPID=MyAPIKey`)
            .then(res => res.json())
            .then(result => this.setState({ weatherData: result.main }))            
    }

    componentDidMount() {
        this.fetchData();
    }

    handleFormSubmit({city}) {
        this.setState({selectedCity: city})
    }

    render() {
        return (
            <div>
                <Headings />
                <Form onFormSubmit={this.handleFormSubmit} />
                <Weather weather={this.state.weatherData} />
            </div>  
        );
    }
}

export default WeatherContainer;

Это мой компонент формы

import React, { Component } from 'react';

class Form extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            city: ""
        };
        this.handleCityChange = this.handleCityChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        const city = this.state.city;
        if (!city) {
            return
        }

        this.props.onFormSubmit({
            city: city
        });

        this.setState({
            city: ''
        })
    }

    handleCityChange(event) {
        this.setState({
            city: event.target.value
        })
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input
                    type="text"
                    value={this.state.city}
                    placeholder="Enter City"
                    onChange={this.handleCityChange}
                />
               <input type="submit" value="Submit" />
                {/* <button>Get Weather</button> */}
            </form>
        );
    }
}

export default Form;

Мой погодный компонент

import React from 'react';

const Weather = ({ weather }) => {
    if(!weather) return null

    return (
        <div>
            <h1>{weather.temp}</h1>
        </div>
    );
} 

export default Weather;

Answer 1

Итак, у вас есть метод componentDidMount, но вы не обрабатываете обновления состояния. Вам нужен componentDidUpdate метод

componentDidUpdate(prevProps, prevState) {
  if (prevState.city !== this.state.city) {
    this.fetchData();
  }
}