在官方示例中使用 useState 时出错答案

【问题标题】：Error when using useState in official example在官方示例中使用 useState 时出错
【发布时间】：2019-02-09 17:07:10
【问题描述】：

此代码来自here。

import React from 'react';
import useState from 'react'

let f = function() {

  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default f;

首先，该页面的这一行...

import React, { useState } from 'react';

... 导致 useState 为空，但我更改了该行。无论如何，我收到以下错误...

TypeError: react__WEBPACK_IMPORTED_MODULE_1___default(...) is not a function

如果我把代码改成这个，这个错误就会消失......

const [count, setCount] = [1, () => {}]

所以我认为useState 是问题所在 - 它不是函数。也许我的自定义导入没有做正确的事情。在这种情况下，为什么官方导入不起作用？

我正在使用 React 16.8.1。我的包文件有这些...

"react-dom": "16.8.1",
"react": "16.8.1",

我已删除本地 node_modules 文件夹并运行 npm install --force -g。

Console.log on useState 给...

【问题讨论】：

这太奇怪了。您可以使用代码框链接或发布您的回购吗？
不这么认为。我可以删除本地的node_modules，它仍然可以工作。
哦，你要重启服务器。

标签： reactjs react-hooks

【解决方案1】：

useState 是一个命名导出。您不能像默认导出一样导入它。

改变这两行

import React from 'react';
import useState from 'react';

到

import React, { useState } from 'react';

【讨论】：

我在问题中提到了这一点。这会导致 useState 未定义。
您能否尝试删除您的package-lock.json 并运行npm i 而不是npm install --force -g？
另外，您是否使用create-react-app 创建项目？
是的，我使用了 create-react-app。不幸的是，删除锁定文件不起作用。
其实我并没有用create-React-app和支持hook的版本。我正在升级现有的应用程序。这有什么不同吗？

【解决方案2】：

您必须重新启动 Web 服务器才能使用新版本的 React 重新编译。呵呵。

【讨论】：