react.js useState 未定义答案

【问题标题】：react.js useState is not definedreact.js useState 未定义
【发布时间】：2021-07-18 13:32:58
【问题描述】：

我对链接使用反应，但 useState 未定义

    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>


<script type="text/babel">
function App() {
  const [name , setName] = useState('ali');
  const handelClick = () => {
    setName('mahdi')
  }
  return (
  <div className="continer">
    <header>
      <Navbar />
    </header>
    <div className="test">
      <div>{name}</div>
      <button type="button" name="button" onClick={handelClick}> click </button>
    </div>
    <div className="content">
      <Business />
    </div>
  </div>
  )
}

//render components
ReactDOM.render(
  <App />,
  document.getElementById("root")
);

</script>

【问题讨论】：

首先你必须导入它："import {useState} from "react"
您必须从 React 对象中使用它，通常通过在代码顶部进行解构：const { useState } = React;
@klaus_bathory - 鉴于上述脚本标签的内容，它们似乎没有使用模块。

标签： javascript reactjs

【解决方案1】：

你需要从全局 React 对象中获取它。

const { useState } = React;
function App() {
  // ...

所有其他的钩子都是一样的。

您可能还想将handelClick 更改为handleClick 以避免混淆自己。

【讨论】：

点击处理程序肯定是用来播放弥赛亚的。 ;-)
这不起作用。调试 React 工厂我可以看到它检查 enableHooks 是否为真，如果是，则仅将钩子添加到 React 对象。它在脚本前面设置为false。应该如何启用它？
@steinybot 听起来您使用的代码与此处问题中的代码完全不同，在这种情况下，我的回答显然不适合您的情况。如果您有不同的问题，请将其作为问题发布，而不是投反对票并以评论的形式提出不同的问题。
我的代码并没有太大的不同，只是它指定了 React enableHooks 标志后面。所以不会让我删除我的反对票。

【解决方案2】：

由于您使用 CDN，因此您必须将其用作对象 React 的属性，如下所示：

//...

const [name , setName] = React.useState('ali');

//...

【讨论】：

【解决方案3】：

如果您像我一样尝试在 StackOverflow 中创建代码 sn-p 时遇到此问题，那么部分问题是在撰写本文时下拉列表中的最新版本是 16.6.3。

这些钩子是在 16.6.1 中添加的，但它们位于功能标志后面，并且默认情况下直到 16.8.0 才启用。

所以使用：

const { useState } = React;

或：

React.useState(...)

单独解决不了问题。

确保也使用 >= 16.8.0 的版本。

【讨论】：