React 16.7 Крючки: `response.useState` не является функцией

Я пробую функциональные компоненты с крючками реагировать 16.7, есть ошибка:

введите описание изображения здесь

SRC / компоненты / нижний колонтитул / index.js

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

package.json

введите описание изображения здесь

Что я должен делать?

Всего 3 ответа


Убедитесь, что вы 16.7.0-alpha.0 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> 


Реагирующие и реакционные версии различны в вашем пакете. Json

Поэтому, чтобы исправить проблему, вам необходимо обновить реакцию на ту же версию, что и реакция

Выполните команду ниже. Это установит реагентную версию 16.7.0-alpha.0

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

После установки компонента реагирования повторно свяжите проект.


Я установил как реакцию, так и реакцию-альфа, как вы можете видеть в этом пакете . 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);

Надеюсь, что этот пример разъясняет / решает ваши проблемы.

С уважением


Есть идеи?

10000