使用 Ajax 在 React 中打开天气数据

Open Weather data in React using Ajax

本文关键字：数据 Ajax React 使用      更新时间：2023-09-26

给定开放天气图当前天气数据API，我尝试使用ajax将当前天气数据拉入我的React.js应用程序中，提取给定城市的当前温度值，然后在我的组件中呈现该值。

我正在使用的测试 JSON 数据位于以下网址：http://api.openweathermap.org/data/2.5/weather?id=5391997&units=imperial

var CityGrid = React.createClass({
  componentDidMount: function() {
    $.ajax({
      url: 'http://api.openweathermap.org/data/2.5/weather?id=5391997', 
      // ^^ this should get a variable where id=5391997 is set
      dataType: 'json',  
      success: function(data) {
          this.setState({temp: data.main.temp});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  getInitialState:function(){
    return{
      cities:[
        { 
          name: "San Francisco",
          id: 5391997,
          temp: 50,  // << this should receive value from ajax call
          UTCOffset:-7,
          address: 999 Nathan Lane,
          phone: 555-5555
        },
        // 12 more city objects in this array, removed for brevity
    ]}
},
render: function() {
    console.log(this.state.temp); // << this returns the right temp
    // for San Francisco, because I hardcoded the value into the url
    return(
        <div className="city-grid">
        {this.state.cities.map(function(city,i){
          return(
            <CityRow key={i} name={city.name} temp={city.temp}
            UTCOffset={city.UTCOffset} address={city.address} 
            phone={city.phone}/>
          );
        })}
      </div>
    );
  }
});
module.exports = CityGrid;

我的问题：

  1. 如何提取温度值？在我的渲染函数中，console.log 返回 JSON 对象，这意味着数据已被绑定并且可以在我的渲染函数中访问。但是，当我尝试获取温度时，我希望温度类似于this.state.data.main.temp，我收到"数据未定义"的错误。然后，我希望能够在我的城市对象中为 12 个城市中的每个城市设置id: 5391997,此值。

更新^^ 这已解决：@dkurbz在我的 ajax 成功方法中将状态设置为 temp 的建议对我来说效果很好。

  1. 我还面临着如何为每个城市唯一设置网址的挑战。在我的 ajax 调用中，有 id=5391997 ，我想从 cities 对象中获取并将我的 ajax url 更改为类似于 'baseURl' + this.props.id + '&units=imperial' 的东西。我对如何做到这一点完全不知所措。

更新^^这是我目前卡住的地方。

这可能会有一些

错误，但我认为它应该让你非常接近。

var React = require("react");
var $ = require("jquery");
var City = React.createClass({
    propTypes: {
        id: React.PropTypes.string.isRequired,
        units: React.PropTypes.string
    },
    getInitialState: function () {
        return {
            data: {},
            fetching: false
        };
    },
    getDefaultProps: function () {
        return {
            units: "imperial"
        };
    },
    render: function () {
        return (
            <div class="city">
                {this.state.fetching ? "Downloading data..." : this.state.data.main.temp}
            </div>
        );
    },
    componentWillMount: function () {
        $.ajax({
            url: "http://api.openweathermap.org/data/2.5/weather?id="+this.props.id+"&units="+this.props.units,
            dataType: "json",
            beforeSend: function () {
                this.setState({fetching: true});
            },
            success: function (data) {
                this.setState({data: data});
            },
            error: function (xhr, status, err) {
                console.error(xhr, status, err.toString());
            },
            complete: function () {
                this.setState({fetching: false});
            },
            context: this
        });
    }
});
var CityGrid = React.createClass({
    propTypes: {
        cityIds: React.PropTypes.array.isRequired
    },
    renderCity: function (cityId) {
        return <City id={cityId} />;
    },
    render: function () {
        return (
            <div class="city-grid">
                {this.props.cityIds.map(this.renderCity)}
            </div>
        );
    }
});

话虽如此...这不是正确的解决方案。ajax 调用应该移到组件之外(你有没有研究过 Flux，或者其他一些能给你模型或商店概念的库？(，然后返回的"数据"应该以某种方式转换/规范化为平面结构，然后作为道具传递给 City 组件(并且只有有意义的/你关心的道具(。这样，City 组件就可以不知道其数据来自何处。从理论上讲，您应该能够使用来自其他来源的一些数据、多个来源、虚拟数据等来渲染城市。但我不会去为你编写所有这些代码;)

在你setState data之前，this.state.data是未定义的。您可以通过从this.state.data开始不渲染任何内容直到定义它来解决此问题，或者在getInitialState中设置data: {}。

相关文章：