Question

我是javascript的新手，并开始从中学到很棒的东西。如下面的代码，我如何才能在index内返回getData().then(data => {的值。 getData函数具有json响应值。

subPatternStart() {
  getData().then(data => {
    var patternStart = 1525750500000;
    var index = 0;

    for (var i = 0; i < data.length; i++) {
      if ( patternStart >= data[i].time && patternStart < data[i+1].time ) {
        //...somecode
      }
    }
    console.log("Index:" , index);
  })
}

我想要实现的是，当我调用此函数时，我应该只获取index的值，在这种情况下，控制台日志值等同于1。

我的渲染方法中有这个。

render() {
  index={this.subPatternStart()}
}

在这个简单的代码中，它返回render方法中的确切值，我想做类似的事情。

subPatternStart() {
  var patternStart = 1;
  return patternStart;
}

Answer 1

您应该使用从getData获得的值设置组件的状态。然后React可以自我更新并呈现页面。例如

import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      index: 0
    }
  }

  subPatternStart() {
    getData().then(data => {
      var patternStart = 1525750500000;
      var index = 0;

      for (var i = 0; i < data.length; i++) {
        if (patternStart >= data[i].time && patternStart < data[i + 1].time) {
          //...somecode
        }
      }
      this.setState({
        index: index
      });
    })
  }
  render() {
    index =  this.state.index
  }
}

Answer 2

函数subPatternStart调用异步函数getData，因此您需要使用callback或promises来获取数据。

1。使用回调

subPatternStart(callbackFunction) {
        getData().then(data => {
            var patternStart = 1525750500000;
            var index = 0;

            for (var i = 0; i < data.length; i++) {
                if (patternStart >= data[i].time && patternStart < data[i + 1].time) {
                    //...somecode
                }
            }
            console.log("Index:", index);
            callbackFunction(index);
        })
    }

// calling the function
render() {
    var index;
    this.subPatternStart((i) => { index = i })
}

2。使用Promises

subPatternStart(callbackFunction) {
    var promise = new Promise(resolve => {
        getData().then(data => {
            var patternStart = 1525750500000;
            var index = 0;

            for (var i = 0; i < data.length; i++) {
                if (patternStart >= data[i].time && patternStart < data[i + 1].time) {
                    //...somecode
                }
            }
            console.log("Index:", index);
            resolve(index);
        })
    })
    return promise;
}


// calling the function
async render() {
    index = await this.subPatternStart();
}

Answer 3

在subPatternStart函数中的console.log（）之后，返回索引应该得到的任何内容。

如何从函数内部的数据中正确返回值

3 个答案:

1。使用回调

2。使用Promises