无法呈现{this.state.city}

Question

我正在使用OpenWeatherMap应用程序接口在React中创建一个天气应用程序。有一个输入表单和一个按钮，当我点击按钮时，我希望看到城市名称。当我这样做时，我收到了来自API的数据，但我无法在屏幕上呈现它，而我可以在控制台中记录它。

为此，我使用了三个独立的文件。用于提交条款的App.js、用于提交条款的Form.js和用于接口配置的weather.js。

我猜我需要映射接收到的数据，但还没有成功。

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

您正在将state的city设置为response.name。您将问题标记为axios，所以我假设您正在使用axios作为ajax。如果是这样，您将希望从response.data.name而不是response.name返回响应中的数据。

Answer 2

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

this.setState({
    city: 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>
        );
    }
}