[英]Invariant Violation: Hooks can only be called inside the body of a function component
TL;DR: I'm trying to use the new react-hooks
api, but I keep getting an Invariant Violation error when calling the setState
hook, but it keeps failing. 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;
If you think back in the class component version, your code is calling this.setState
in the render()
which will trigger another render, and call this.setState
again, and the cycle repeats, and you'll get the error:如果您回想一下类组件版本,您的代码在
render()
调用this.setState
这将触发另一个渲染,并再次调用this.setState
,并且循环重复,您将收到错误:
Uncaught Error: Too many re-renders.
未捕获的错误:重新渲染过多。 React limits the number of renders to prevent an infinite loop.
React 限制渲染次数以防止无限循环。
You wouldn't call this.setState
directly in your render method and neither should you do that using hooks.您不会在渲染方法中直接调用
this.setState
,也不应该使用钩子来调用this.setState
。
It's unclear what you're trying to achieve here, but I think what you want is to set the name only once, which you would do in componentDidMount
, and you can use the useEffect
hook to achieve that.目前还不清楚您要在这里实现什么,但我认为您想要的是只设置一次名称,您可以在
componentDidMount
,并且您可以使用useEffect
钩子来实现这一点。
Or if you want "Brussels" to be the initial state, pass it as the value into useState()
.或者,如果您希望“布鲁塞尔”成为初始状态,请将其作为值传递给
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>
Calling setHeading("Brussel") will cause re rendering again and again which in turns result in an infinite loop, to prevent that you need an event to change the header from "Heading" to "Brussels".调用 setHeading("Brussel") 将导致一次又一次的重新渲染,从而导致无限循环,以防止您需要一个事件将标题从“Heading”更改为“Brussels”。 Below code might help you
下面的代码可能对你有帮助
const Text = () => {
const initialState= 'Heading'.toUpperCase();
const [heading, setHeading] = useState(initialState);
return (
<header>
<h1>
{heading}
<button onClick= {() =>{setHeading("Brussel")}}>ChangeName</button>
</h1>
</header>
);
};
I upgraded my react version in a certain project so I can use hooks until then I had the same issue and based on the docs the error occurs for mismatching the version of react and react-dom.我在某个项目中升级了我的 react 版本,所以我可以使用钩子,直到那时我遇到了同样的问题,并且根据文档,错误是由于 react 和 react-dom 的版本不匹配而发生的。 Upgrading the react-dom works for in my case.
升级 react-dom 适用于我的情况。
https://reactjs.org/warnings/invalid-hook-call-warning.html https://reactjs.org/warnings/invalid-hook-call-warning.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.