Javascript 答应我，一切都解决得太早了

我正在加载存储在几个JSON中的论坛数据，以显示在网站上，然后使用React呈现。数据本身分为两种类型的文件：线程数据和用户数据

// threads/135.json
{
  "title": "Thread Title",
  "tid": 135,
  "posts": [
    {
      "pid": 1234,
      "timestamp": 1034546400,
      "body": "First forum post",
      "user": 5678
    },
    {
      "pid": 1235,
      "timestamp": 103454700,
      "body": "Reply to first forum post",
      "user": 9876
    }
  ]
}

加载线程数据后，将根据用户ID加载用户数据

// user/1234.json
{
  "id": 1234,
  "name": "John Doe",
  "location": "USA"
}

实际代码基于，转化为一个函数，如下所示：

export default function loadData(id) {

  var didLoadUser = [];
  var dataUsers = {};
  var dataThread = {};

  getJSON('./threads/' + id + '.json').then(function(thread) {
    dataThread = thread;

    // Take an array of promises and wait on them all
    return Promise.all(
      // Map our array of chapter urls to
      // an array of chapter json promises
      thread.posts.map(function(post) {
        if (post.user > 0 && didLoadUser.indexOf(post.user) === -1) {
          didLoadUser.push(post.user);
          return getJSON('./users/' + post.user + '.json') ;
        }
      })
    );
  }).then(function(users) {
    users.forEach(function(user) {
      if (typeof user !== 'undefined') {
        dataUsers[user.id] = user;
      }
    });
  }).catch(function(err) {
    // catch any error that happened so far
    console.error(err.message);
  }).then(function() {
    // use the data
  });
}

// unchanged from the mentioned Google article
function getJSON(url) {
  return get(url).then(JSON.parse);
}

// unchanged from the mentioned Google article
function get(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      // This is called even on 404 etc
      // so check the status
      if (req.status == 200) {
        // Resolve the promise with the response text
        resolve(req.response);
      }
      else {
        // Otherwise reject with the status text
        // which will hopefully be a meaningful error
        reject(Error(req.statusText));
      }
    };

    // Handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // Make the request
    req.send();
  });
}

代码本身运行良好，然后将其转换为在我的组件的

componentWillMount

函数中调用的函数

componentWillMount: function() {
    this.setState({
      data: loadData(this.props.params.thread)
    })
}

我怀疑错误在于函数本身，因为它看起来像

Promise。所有
在加载线程数据之后和加载任何用户数据之前都会得到解决

// threads/135.json
{
  "title": "Thread Title",
  "tid": 135,
  "posts": [
    {
      "pid": 1234,
      "timestamp": 1034546400,
      "body": "First forum post",
      "user": 5678
    },
    {
      "pid": 1235,
      "timestamp": 103454700,
      "body": "Reply to first forum post",
      "user": 9876
    }
  ]
}

我最近才开始使用承诺，所以我的知识相当基础。我做错了什么？我是否需要将主函数包装到另一个承诺中

this.setState({
   data: loadData(this.props.params.thread)
})

您不能从上述异步调用返回，因为数据没有以同步方式及时准备好。您返回了一个承诺，因此代码应该如下所示：

loadData(this.props.params.thread)
 .then((data)=> {
   this.setState({
     data,
   })
})

注:
为了使其正常工作，您需要从
loadData
返回承诺，因此：

...
return getJSON(..
...

您不能从上述异步调用返回，因为数据没有以同步方式及时准备好。您返回了一个承诺，因此代码应该如下所示：

loadData(this.props.params.thread)
 .then((data)=> {
   this.setState({
     data,
   })
})

注:
为了使其正常工作，您需要从
loadData
返回承诺，因此：

...
return getJSON(..
...

你如何调用函数/你期望结果在哪里？你的承诺链看起来不错，我认为问题在于可视化（react），正如@loan在他的回答中提到的。
loadData（）
需要返回一个承诺和
loadData（）的调用者
需要使用承诺来访问结果。您如何调用函数/您希望结果出现在哪里？您的承诺链看起来不错，我认为问题在于他在回答中提到的@loan的可视化（react）。
loadData（）
需要返回承诺和
loadData（）的调用方
需要使用承诺来访问结果。