在官方示例中使用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

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