Не могу сделать {this.state.city}

Question

Я создаю приложение погоды в React, используя OpenWeatherMap API. Есть форма ввода и кнопка, и я ожидаю увидеть название города при нажатии кнопки. Я получил данные из API, когда я это сделал, но не могу отобразить их на экране, пока я могу войти в консоль.

Для этого я использую три отдельных файла. App.js, Form.js для отправки терминов и weather.js для настройки API.

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

class App extends React.Component {
    state = {
        city: null,
    }

    getWeather = async city => {
        const response = await weather.get('/forecast', {
            params: {
                q: city
            }
        });

        this.setState({
            city: response.name,
        })
        console.log(city); <--- This works
    }

    render() {
        return (
            <div> 
                <Form loadWeather={this.getWeather} />            
                <p>{this.state.city}</p> <--- This doesn't work                    
            </div>
        );        
    }
}

class Form extends React.Component {
    state = { term: '' };

    onFormSubmit = (event) => {
        event.preventDefault();

        this.props.loadWeather(this.state.term);
        this.refs.textInput.value = '';
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onFormSubmit}>
                    <input 
                    ref="textInput"
                    type="text" 
                    value={this.state.term} 
                    onChange={event => this.setState({term: event.target.value})}
                     />
                    <button>Get Weather</button>
                </form>
            </div>
        );
    }
}
export default Form;

Я собираюсь передать {this.state.name} в качестве реквизита дочернему компоненту, но пока полученные данные даже не появляются в этом компоненте, если он сам.

Answer 1

«this.setState» - это функция, которая должна вызываться следующим образом.

this.setState({
    city: response.name,
})

Answer 2

Вы устанавливаете состояние city на response.name.Вы пометили вопрос как axios, поэтому я предполагаю, что вы используете axios для ajax.Если это так, вы захотите получить данные из ответа от response.data.name, а не response.name.

Answer 3

Если вы хотите получить информацию о городе из начального рендера, попробуйте вызвать / вызвать метод getWeather() в жизненном цикле componentDidMount().То, как вы используете setState(), также неверно.это должно быть что-то вроде этого, как указано ниже.Тот же жизненный цикл можно использовать для получения данных, даже если вы использовали отдельный файл для вызова метода

class App extends React.Component {
    state = {
        city: null
    };

    componentDidMount() {
        this.getWeather("city");
    }

    getWeather = async city => {
        const response = await weather.get("/forecast", {
            params: {
                q: city
            }
        });

        this.setState({
            city: response.name
        });
    };

    render() {
        return (
            <div>
                <p>{this.state.city}</p>
            </div>
        );
    }
}