问题:React 16.7 Hooks:react.useState不是函数

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

src/components/页脚/index.js

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

包.json

我应该怎么办?

解答

确保将react-dom也升级到16.7.0-alpha.0。

package.json

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

也可能是你只在package.json中撞了版本,没有安装新版本。您可以删除node_modules并重新安装。

npm ci

例子

const { useState } = React;

function Footer() {
  const [selectedTab, setSelectedTab] = useState('redTab');
  const [hidden, setHidden] = useState(false);
  const [fullScreen, setFullScreen] = useState(false);
  
  return (
    <div>
      <button onClick={() => setSelectedTab('blueTab')}>{selectedTab}</button>
      <button onClick={() => setHidden(isHidden => !isHidden)}>
        {hidden ? 'hidden' : 'visible'}
      </button>
      <button onClick={() => setFullScreen(isFullScreen => !isFullScreen)}>
        {fullScreen ? 'fullscreen' : 'windowed'}
      </button>
    </div>
  );
}

ReactDOM.render(
  <Footer />,
  document.getElementById('root')
);

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="root"></div>