如何在 React + Babel 中允许异步函数？答案

【问题标题】：How to allow async functions in React + Babel?如何在 React + Babel 中允许异步函数？
【发布时间】：2020-04-19 12:12:10
【问题描述】：

我有一个 Typescript/React 应用程序，它可以使用 then/catch 承诺执行异步功能，但不能使用 async/await/try/catch。

错误是： Uncaught ReferenceError: regeneratorRuntime is not defined 。

错误似乎来自 Babel。这是我的配置：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": ["babel-plugin-styled-components"]
}

如何解决这个问题？

【问题讨论】：

标签： javascript reactjs babeljs

【解决方案1】：

您可以在here找到您的解决方案

如果我总结一下，那么您必须安装一个名为 plugin-transform-runtime 的 babel 插件，并且需要配置 .babelrc 设置。

npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime

安装这两个后，转到.babelrc 文件并添加这些插件。

"plugins": [
    ["@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ],

【讨论】：

谢谢！这行得通！对于使用 webpack 的任何人，请确保不要将其放入您的 webpack.config.js，它只需要放入您的 .babel.rc。

【解决方案2】：

通天塔7

所有必要的包都包含在“@babel/preset-env”中

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "node": "10.0.0"
                }
            }
        ],
        "@babel/preset-react"
    ]
}

超级基础示例

import React from "react";

const Board = () => {

    const [resp_post, setResp_post] = React.useState(0);

    (async function getData() {
        setResp_post(await Promise.resolve(30));
    })();
    
    return <h1>Board {resp_post} {value}</h1>;
};

export default Board;

preset-env documentation

preset-reactlink documentation

【讨论】：