[英]Invariant Violation: Hooks can only be called inside the body of a function component
TL;DR:我正在尝试使用新的react-hooks
api,但是在调用setState
钩子时我不断收到 Invariant Violation 错误,但它一直失败。
import React, { useState } from 'react';
// type State = {
// heading: string;
// }
const Text = () => {
const initialState = 'Heading'.toUpperCase();
const [heading, setHeading] = useState(initialState);
return (
<header>
<h1>
{setHeading('Brussels')};
{heading}
</h1>
</header>
);
};
export default Text;
如果您回想一下类组件版本,您的代码在render()
调用this.setState
这将触发另一个渲染,并再次调用this.setState
,并且循环重复,您将收到错误:
未捕获的错误:重新渲染过多。 React 限制渲染次数以防止无限循环。
您不会在渲染方法中直接调用this.setState
,也不应该使用钩子来调用this.setState
。
目前还不清楚您要在这里实现什么,但我认为您想要的是只设置一次名称,您可以在componentDidMount
,并且您可以使用useEffect
钩子来实现这一点。
或者,如果您希望“布鲁塞尔”成为初始状态,请将其作为值传递给useState()
。
const {useState, useEffect} = React; const Text = () => { const initialState = 'Heading'.toUpperCase(); const [heading, setHeading] = useState(initialState); useEffect(() => { setHeading('Brussels'); }, []); // Pass in empty array to simulate componentDidMount. return ( <header> <h1> {heading} </h1> </header> ); }; ReactDOM.render(<Text />, 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>
调用 setHeading("Brussel") 将导致一次又一次的重新渲染,从而导致无限循环,以防止您需要一个事件将标题从“Heading”更改为“Brussels”。 下面的代码可能对你有帮助
const Text = () => {
const initialState= 'Heading'.toUpperCase();
const [heading, setHeading] = useState(initialState);
return (
<header>
<h1>
{heading}
<button onClick= {() =>{setHeading("Brussel")}}>ChangeName</button>
</h1>
</header>
);
};
我在某个项目中升级了我的 react 版本,所以我可以使用钩子,直到那时我遇到了同样的问题,并且根据文档,错误是由于 react 和 react-dom 的版本不匹配而发生的。 升级 react-dom 适用于我的情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.