官方例子使用useState报错

Question

此代码来自 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 在 useState 上给出...

Answer 1

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

改变这两行

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

至

import React, { useState } from 'react';

Answer 2

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

官方例子使用useState报错

Error when using useState in official example

reactjs

react-hooks