web-dev-qa-db-ja.com

React 16.7フック： `react.useState`は関数ではありません

反応16.7のフックで機能コンポーネントを試していますが、エラーがあります：

enter image description here

src/components/Footer/index.js

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

package.json

enter image description here

私は何をすべきか？

reactjsreact-hooks
7
zwl1619

必ず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/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

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

Package.jsonでは、Reactとreact-domのバージョンが異なります

この問題を修正するには、react-domをreactと同じバージョンにアップグレードする必要があります

以下のコマンドを実行します。これにより、react-domバージョン16.7.0-alpha.0がインストールされます

 npm i -s [email protected]

React-domをインストールしたら、プロジェクトを再バンドルします。

2
Hemadri Dasari

この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);

この例が問題を明確化/解決することを願っています。

宜しくお願いします

0
Andrea Giammarchi