javascript - 未捕获的错误:只能在 Class 组件内的函数组件主体内调用 Hooks
问题描述
运行底部附加的示例时出现以下错误:
react-dom.development.js:49 Uncaught Error: Hooks can only be called inside the body of a function component.
at invariant (react-dom.development.js:49)
at resolveCurrentlyRenderingFiber (react-dom.development.js:11633)
at useReducer (react-dom.development.js:11830)
at Object.useState (react-dom.development.js:11824)
at Object.useState (react.development.js:2574)
at App.render (<anonymous>:25:35)
at finishClassComponent (react-dom.development.js:14466)
at updateClassComponent (react-dom.development.js:14429)
at beginWork (react-dom.development.js:15233)
at performUnitOfWork (react-dom.development.js:17940)
class App extends React.Component {
render() {
const [name, setName] = React.useState('Mary');
const [age, setAge] = React.useState(10);
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}
}
ReactDOM.render(
<div>
<App />
</div>,
document.querySelector("#app")
);
<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="app"></div>
解决方案
类组件中不支持挂钩,如果您仍然依赖某些类组件功能,则应该将其设为功能组件或根本不使用挂钩。
function App() {
const [name, setName] = React.useState('Mary');
const [age, setAge] = React.useState(10);
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}
ReactDOM.render(
<div>
<App />
</div>,
document.querySelector("#app")
);
<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="app"></div>
推荐阅读
- python - 合并原始 sql 语句不起作用是 sqlalchemy 连接执行
- python - ValueError:检查输入时出错:预期 input_9 有 3 个维度,但得到了形状为 (80、2048) 的数组
- excel - 根据单元格值将数据复制到新制作的工作表中
- javascript - 我想从 url 获取 id
- php - PHP-FPM 没有从 Dockerfile 正确重启
- amazon-ec2 - 如何通过 AWS cloudfront 提供节点 js api?
- asp.net-mvc - 在索引视图上显示 ID 值而不是文本的静态下拉列表
- c# - Xamarin Forms 自定义控件 BindableProperty propertyChanged not Firing
- amazon-web-services - 如何保护 zappa `remote_env` 存储桶?
- kubernetes - 如何将 nodePort 映射到我自己定义的端口