Uncaught Error: хуки могут вызываться только внутри тела компонента функции

Question

Я пытаюсь использовать новые функции в моем проекте.Я обновил версию реакции на 16.8.1 , однако выдает ошибку

Uncaught Error: Хуки можно вызывать только внутри тела компонента функции

package.json

"react": "^16.8.1",
"react-app-polyfill": "^0.2.0",
"react-dev-utils": "^7.0.1",
"react-dom": "^16.7.0",

index.js

function selectDoc() {
  const [selectedOrg, handleOrgChange] = useState("");
  return (
    <div className="select-info">
      <div className="select-showcase">
        <div style={{ marginRight: '20px' }}>
          <div>With Search</div>
          <Select           
            items={orgsList}
            selectedItem={selectedOrg}
            handleItemChange={handleOrgChange}
          />
        </div>
      </div>
    </div>
  );
}

export default selectDoc;

Answer 1

В моем случае проблема фактически была не в самом компоненте, а в маршруте.

Вместо:

<Route path="/login" exact render={MyLoginComponent} />

Это должно быть

<Route path="/login" exact render={(props) => <MyLoginComponent {...props} />} />

Переключение с «рендеринга» на «компонент» также работает.

Answer 2

Ваш код кажется правильным.Однако вы не обновили react-dom до той же версии, т.е. 16.8.1, что и React, и, следовательно, вы видите эту ошибку, которая сначала немного вводит в заблуждение.И react, и react-dom должны использовать одну и ту же версию, чтобы иметь возможность правильно использовать функции React.

Выполнить

yarn upgrade react-dom@16.8.1

для обновления react-dom до v16.8.1

Если вы используете npm, а не пряжу, вы можете запустить

npm update --save react-dom@16.8.1