ReactJS - 推送到承诺之外的列表答案

【问题标题】：ReactJS - pushing to a list outside of a promiseReactJS - 推送到承诺之外的列表
【发布时间】：2017-09-28 18:36:34
【问题描述】：

我想更新一个在承诺（API 调用）之外定义的列表。

代码如下：

let data = [];
  api.getData(this.state.ID).then((resp) => {
    data = [...data, { title : resp.title }];
    data = [...data, { name :  resp.name }];
  });
  console.log(data); // --> it returns []

数据是 [ ] 并且没有值被推送到它。如何更改我的代码来解决此问题？由于某些原因我不想使用setState()

问候。

【问题讨论】：

如果这正是它编写代码的顺序，它只会返回 [ ]，因为 api.getData 是异步的。！
最终，您想要渲染这些数据，对吗？听从其他人的建议来解决手头的问题，但是根据您的编写方式，没有this.setState 就无法完成。我假设你没有使用 redux。
How do I return the response from an asynchronous call?的可能重复

标签： javascript reactjs react-native promise

【解决方案1】：

Promise 是 ALWAYS 异步的，这意味着在您定义了 Promise 之后，您的数据数组仍然是空的。

要访问填充的数据数组，您必须在 Promise 中引用它。

let data = [];

api.getData(this.state.ID).then((resp) => {
    data = [...data, { title: resp.title }, { name: resp.name }];

    console.log(data);
});

【讨论】：

【解决方案2】：

Async/Await 会帮助你：

let data = [];
async function getData() {
  await api.getData(this.state.ID).then((resp) => {
    data = [...data, { title : resp.title }];
    data = [...data, { name :  resp.name }];
  });
  console.log(data); // --> it shouldn't return empty array
}
getData();

例子：

    function resolveAfter2Seconds(x) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve("You see it after promis end");
        }, 2000);
      });
    }
    
    
    var arr = [];
    async function f1() {
      await resolveAfter2Seconds(10).then(res => arr.push(res));
      alert(arr);
    }
    f1();

【讨论】：

【解决方案3】：

您的 console.log 函数在 api 返回数据之前执行。虽然数据在 api 调用后得到了更新。你看不到它，因为它在那之前被安慰过。

let data = [];
  api.getData(this.state.ID).then((resp) => {
    data = [...data, { title : resp.title }];
    data = [...data, { name :  resp.name }];
    Console.log(data)
})

现在您可以看到数据控制台了。

但是如果你想在 then 方法之后控制数据，那么你可以使用 npm 模块 q 同步 api 的执行。

【讨论】：