无法从 ES6 上的 async/await 函数获取返回值，如何解决？答案

【问题标题】：Having troubles getting returned value from an async/await function on ES6, how to solve it?无法从 ES6 上的 async/await 函数获取返回值，如何解决？
【发布时间】：2020-03-12 03:19:06
【问题描述】：

我正在尝试从数组中减去 id 以将其用作参数，但我在尝试时遇到了一些问题。

这是代码：

  const takeId = async (): Promise<any> => {
    const newArr = await departmentResolution[0].template;

    getTemplateId = await newArr.map((item: any) => {
      return item;
    });

    return getTemplateId[0]; // this returns { id: 11, anotherKey: 'value' }
  }

 const setId = async () => {
    const el = await takeId();

    return el.id;
  }

如果console.log(setId()) 我得到Promise，我只需要它返回的值就可以在这里使用：

      <Container>
        <Breadcrumb />
        {handleTemplate(setId())}
      </Container>

【问题讨论】：

请阅读await 的工作原理。只有当你 await 的价值是一个承诺时，它才会做一些有用的事情。这段代码看起来很误导，因为似乎没有任何实际的异步操作会生成 Promise，因此没有理由使用 async 或 await。
@jfriend00 我已经读过但仍然没有得到这个概念。我只是寻求帮助以获得更清晰的想法。我不认为Please go read 是一个人们来就他们的疑问提出问题的网站的正确答案。
我明白了。因此，您似乎没有真正需要等待的 Promise。没有任何异步发生。您可以删除代码中的所有 async 和 await 关键字，它会正常工作。您还需要从 takeId 修复返回值的类型（它只是一个对象）。
好吧，我这么说是因为你完全误用了await，这表明你对它的用途以及如何使用它以及编写长篇教程没有基本的了解在那种广泛的主题上不是stackoverflow的用途。然后，为了增加问题，您甚至没有真正解释您要解决的问题。首先，您应该从此代码中删除所有使用 async、await 和 promises，因为似乎不存在它们有用的条件。
我现在提出了一些建议。如果你要被他们冒犯，我和其他人就会走开。你写了一个非常不清楚的问题。我回应了一些建议（这可能不恰当地表现出一点沮丧），但这些建议是合法的。我会采纳您的建议，不再尝试为您提供建议。

标签： javascript reactjs typescript ecmascript-6 async-await

【解决方案1】：

不要在渲染模板中使用异步方法。

在模板中，使用在 promise 解决时更新的状态变量。使用状态值时，一旦状态更新，就会触发重新渲染

state = {
  someKey: 'someInitialValue'
};

async myMethod() {
  const myAsyncValue = await anotherAsyncMethod();
  this.setState({ someKey: myAsyncValue });
}

render() {
  return <div>{this.state.someKey}</div>;
}

【讨论】：