React 16.7 Hooks:`react.useState` 不是函数 [英] React 16.7 Hooks : `react.useState` is not a function

问题描述

我正在尝试带有 react 16.7 钩子的功能组件，有一个错误:

src/components/Footer/index.js

function Footer() {const [selectedTab, setSelectedTab] = useState('redTab');const [隐藏，设置隐藏] = useState(false);const [fullScreen, setFullScreen] = useState(false);//...}

package.json

我该怎么办?

解决方案

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

package.json

<代码>{依赖关系":{反应":16.7.0-alpha.0"，反应领域":16.7.0-alpha.0"，...},...}

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

npm ci

示例

const { useState } = React;功能页脚(){const [selectedTab, setSelectedTab] = useState('redTab');const [隐藏，设置隐藏] = useState(false);const [fullScreen, setFullScreen] = useState(false);返回 (<div><button onClick={() =>setSelectedTab('blueTab')}>{selectedTab}</button><button onClick={() =>setHidden(isHidden => !isHidden)}>{隐藏?'隐藏':'可见'}<button onClick={() =>setFullScreen(isFullScreen => !isFullScreen)}>{全屏 ?'全屏':'窗口'}

);}ReactDOM.render(<页脚/>,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>

I am trying functional components with hooks of react 16.7,there is an error:

src/components/Footer/index.js

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

package.json

What should I do?

解决方案

Make sure that you upgrade react-dom to 16.7.0-alpha.0 as well.

package.json

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

It might also be that you only bumped the version in package.json without installing the new version. You can remove node_modules and install again.

npm ci

Example

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>

这篇关于React 16.7 Hooks:`react.useState` 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！