无法渲染 {this.state.city}

Question

我正在使用 OpenWeatherMap API 在 React 中创建一个天气应用程序。有输入表单和一个按钮，当我单击按钮时，我希望看到城市名称。当我这样做时，我从 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} 作为 prop 传递给子组件，但到目前为止，接收到的数据甚至不会出现在该组件上。

Answer 1

“this.setState”是一个函数，应该这样调用。

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

Answer 2

您将状态的 city 设置为 response.name。您将问题标记为 axios，所以我假设您将 axios 用于 ajax。如果是这样，您将希望从response.data.name 的响应中获取数据，而不是response.name。

Answer 3

如果您想从初始渲染中获取城市详细信息，请尝试在 componentDidMount() 生命周期中调用/调用 getWeather() 方法。您使用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>
        );
    }
}