Question

我正在尝试在项目中使用新的react功能挂钩。我已经将React版本更新为 16.8.1 ，但是它给出了错误

未捕获的错误：钩子只能在容器的主体内部调用功能组件

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

您的代码似乎是正确的。但是，您尚未将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

Answer 2

就我而言，问题实际上不在于组件本身，而在于路径。

相反：

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

应该是

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

从“渲染”切换到“组件”也可以。

未捕获的错误：只能在函数组件的主体内部调用挂钩

2 个答案: