Question

我正在编写一个简单的应用程序，需要从API获取一些天气数据。端点。我是React的新手，所以这可能是我不了解如何在React中使用promises。

这是我的代码：

var React = require('react');

var Weather = React.createClass({
   getInitialState: function() {
     console.log('GetInitialState', 'info');
      return {
        foo : 1,
        weatherConditions : "No weather data"
      };  
   },

   update: function() {
     console.log('Updating State', 'primary');
     let self = this;
     function httpRequestWeather(url) {
       return new Promise(function(resolve, reject) {
          var weatherRequest = new XMLHttpRequest();
          weatherRequest.open("GET", url, true);
          weatherRequest.onreadystatechange = function() {
            if ( this.status === 200) {
                console.log("request finished and response is ready");
                console.log(this.response);
                // only returns when I post code here
                self.setState({
                    weatherConditions: this.response
                 });

                resolve(this.response);
            } else{
                reject(new Error("no weather data"));
            }
          };
        weatherRequest.send();
      });
     }
  httpRequestWeather("www.weatherendpoint.con/json").then(function(responseText){
    let text = JSON.parse(responseText);
    //never gets triggered
    self.setState({
        weatherConditions: "Hi"
     });
  }).catch(function(){
     //always triggered
    self.setState({
        weatherConditions: "Buy"
     });
});

  this.setState({foo: 2});
},

 render: function() {
   console.log('Render', 'success');
   let condition = this.state.weatherConditions;
   return (
    <div>
        <span>{condition} </span>
        <span>{this.state.foo} </span>
    </div>
    )
  },

 componentWillMount: function() {
  console.log('ComponentWillMount', 'warning');
  this.update();
 },

 componentDidMount: function() {
   console.log('ComponentDidMount', 'warning');
   this.update();

 },

shouldComponentUpdate: function() {
  console.log('ShouldComponentUpdate', 'info');
  return true;
}

 });

module.exports = Weather;

基本上，问题是在这个功能中我必须触发 self.setState（{weatherConditions：this.response}）;

function httpRequestWeather(url) {
   return new Promise(function(resolve, reject) {
      var weatherRequest = new XMLHttpRequest();
      weatherRequest.open("GET", url, true);
      weatherRequest.onreadystatechange = function() {
        if ( this.status === 200) {
            console.log("request finished and response is ready");
            console.log(this.response);
            // only returns when I post code here
            self.setState({
                weatherConditions: this.response
             });

            resolve(this.response);
        } else{
            reject(new Error("no weather data"));
        }
      };
    weatherRequest.send();
  });
 }

如果我尝试在promise promise上设置状态，我总是得不到解决。

httpRequestWeather("www.weatherendpoint.con/json").then(function(responseText){
let text = JSON.parse(responseText);
    //never gets triggered
    self.setState({
       weatherConditions: "Hi"
    });
  }).catch(function(){
    //always triggered
    self.setState({
      weatherConditions: "Buy"
    });

我做错了什么？谢谢！

Answer 1

执行请求时出错。您应该先检查错误，看看为什么会得到错误，并根据错误流量设置state。

httpRequestWeather("www.weatherendpoint.con/json")
 .then(function(responseText){
    let text = JSON.parse(responseText);
    self.setState({
       weatherConditions: "Hi"
    });
  }).catch(function(err){
    console.log('Error on request:', err);
    self.setState({
      error: err
    });
 });

Answer 2

如果您想在成功和错误条件下调用self.setState(...)，那么以下模式可能会有用：

asyncRequest()
.then(function(data) {
    return { /* properties */ }; // state object (success)
}, function(err) {
    console.log(err);
    return { /* properties */ }; // state object (something suitable to describe an error)
})
.then(self.setState);

所以在这里你可以写：

httpRequestWeather() // pass url if necessary
.then(function(weatherData) { // make sure `httpRequestWeather()` delivers data, not a JSON string.
    return {
        'weatherConditions': weatherData,
        'error': null
    };
}, function(err) {
    console.log('Error on request:', err); // optional
    return {
        'weatherConditions': 'unknown',
        'error': err
    }
})
.then(self.setState);

上面的特定属性只是我对可能有用的内容的看法，并且可以根据self.setState（和/或self.render）期望的内容进行调整。例如，error属性可能是不必要的。

ReactJS应用程序

2 个答案: