Question

我正在尝试使用我在模板reactjs项目中找到的服务功能从服务器获取数据。我从服务器接收到一个非常精细的anwser，我可以看到数组在服务中仍然没问题，但是当它移交给首先调用它的组件时却没有。在组件中我得到一个promise对象，它有值（我已在控制台中看到它们），但我无法访问它们。我错过了什么？

我的组件具有以下功能：

calculate(dict) {
    var results = Service.calc(dict)
      .catch((err) => {
          var errResp = JSON.parse(err.response);
          console.log(errResp);
          this.setState({responseErrors: errResp});
    });
    this.setState({results:results._handler});
}

当我将结果打印到控制台时，我看到了Promise对象，在_handler.handler里面是一个带有我的值的值数组，但我无法使用它们。访问结果时出现错误._handler.handler：undefined。

被叫服务如下所示：

class Service {
    calc(dict) {
    return this.handleCalculate(when(request({
        url: UserConstants.URL,
        method: 'POST',
        type: 'json',
        data: dict
    })));
}

handleCalculate(calcPromise) {
    return calcPromise.then(
        function(data) {
            console.log(data); //Success
            return data;
        }
    )
}

同时我直接在组件中使用ajax调用而不是服务。但我明白这是不好的做法，我怎么能做到这一点？

Answer 1

嗨，基本上你把setState放在错误的地方。（它立即设置状态而不等待结果得到解决）。看起来应该是这样的

calculate(dict) {
    var results = Service.calc(dict)
      .then(results => {
         this.setState({results: results});
      })
      .catch((err) => {
          var errResp = JSON.parse(err.response);
          console.log(errResp);
          this.setState({responseErrors: errResp});
    });
}

ReactJS＆amp; Flux从promise

1 个答案: