React 16.7 Hooks:`react.useState` 不是一个函数

IT技术 reactjs react-hooks
2021-05-02 12:58:42

我正在尝试带有 react 16.7 钩子的功能组件,出现错误:

在此处输入图片说明

源代码/组件/页脚/index.js

function Footer() {
  const [selectedTab, setSelectedTab] = useState('redTab');
  const [hidden, setHidden] = useState(false);
  const [fullScreen, setFullScreen] = useState(false);
 //...
}

包.json

在此处输入图片说明

我该怎么办?

3个回答

确保您也升级react-dom16.7.0-alpha.0

包.json

{
  "dependencies": {
    "react": "16.7.0-alpha.0",
    "react-dom" :"16.7.0-alpha.0",
    ...
  },
  ...
}

也可能是您只是在package.json没有安装新版本的情况下插入了版本。您可以删除node_modules并重新安装

npm ci

例子

我已经安装了 react 和 react-dom alpha,你可以在这个 package.json 中看到

在同一个项目中,使用以下代码可以正常工作:

import React, { useRef, useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const [icount, setICount] = useState(0);
  const {current: increment} = useRef(1 + Math.floor(Math.random() * 5));
  return (
    <div>
      Count {count}<br />
      Increment {increment}<br />
      <button onClick={() => {
        setCount(count + 1);
        setICount(icount + increment);
      }} clicks={count}>
        Current {icount}
      </button>
    </div>
  );
}

export default Counter;

可以通过基本应用程序测试/使用该导出,例如:

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';

ReactDOM.render(<Counter />, document.body);

我希望这个例子能澄清/解决你的问题。

最好的祝福

你的 package.json 中的 React 和 react-dom 版本不同

因此,要解决此问题,您需要将 react-dom 升级到与 react 相同的版本

运行下面的命令。这将安装 react-dom 版本 16.7.0-alpha.0

 npm i -s react-dom@16.7.0-alpha.0

安装 react-dom 后重新捆绑项目。