Question

我正在使用OpenWeatherMap API在React中创建一个天气应用。有输入表单和一个按钮，当我单击该按钮时，我希望看到城市名称。我这样做是从API接收数据的，但是我可以在控制台中登录时却无法在屏幕上呈现数据。

为此，我使用了三个分开的文件。 App.js，用于提交条款的Form.js和用于API配置的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

“ 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>
        );
    }
}

无法呈现{this.state.city}

3 个答案: