reactjs TypeError: Object(...) is not a function when using hooks答案

【问题标题】：reactjs TypeError: Object(...) is not a function when using hooksreactjs TypeError: Object(...) is not a function when using hooks
【发布时间】：2019-06-07 21:17:40
【问题描述】：

我正在尝试使用反应钩子导出一个正常的功能组件，但我收到了这个错误。

TypeError: Object(...) 不是函数

当我删除钩子并在没有任何状态的情况下将其导出时，它可以工作。将相同的代码导出为 Class 组件也可以。

import React,{ useState } from 'react';

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

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

export default Mycomponent;

这是我如何导入和使用功能组件。

import Mycomponent from './mycomponet';
class MYClassComponent extends Component {
  render() {
    return (
      <Mycomponent />
    }
}

我正在使用react 16.6.3 并使用create-react-app。

【问题讨论】：

您使用的是什么捆绑器和捆绑器设置？编译/转译的代码是什么样的？您是否验证过 useState 实际上是一个函数？你使用的是什么版本的 React（和分发文件）？
我正在使用 react 16.6 并使用 creat-react-app
@saurabh - React hooks 从 v16.8 开始提供。

标签： javascript reactjs react-hooks

【解决方案1】：

我正在使用 react 16.6.3...

这就是问题所在。挂钩是在 v16.8 中添加的，因此您的代码中的 useState 是 undefined。

（这是转译对您隐藏错误的时候之一[不是说如果您需要支持旧环境，您有很多选择]。如果那是本机 import 语句，它会失败并出现有用的错误说 React 没有 useState 命名的导出。但是当使用 CJS 或 AMD 版本的 React 时，您的代码会转换为执行 var useState = React.useState; 的东西，所以它不会出错，它只是给你undefined——这不是一个函数。:-))

【讨论】：