不变冲突:钩子只能在函数组件内部调用

Question

TL；DR:我正在尝试使用新的react-hooksapi，但在调用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;

Answer 1

如果你回想一下类组件版本，你的代码在render()中调用this.setState，这将触发另一个渲染，然后再次调用this.setState，循环重复，你会得到错误：

未捕获错误：重新渲染过多。React限制渲染次数，以防止出现无限循环。

您不会在渲染方法中直接调用this.setState，也不应该使用钩子来执行此操作。

目前还不清楚您在这里想要实现什么，但我认为您想要的是只设置一次名称，这可以在componentDidMount中进行，并且可以使用useEffect挂钩来实现。

或者，如果您希望"Brussels"是初始状态，请将其作为值传递到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>

Answer 2

调用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>
);
};

Answer 3

我在某个项目中升级了我的react版本，这样我就可以使用钩子，直到那时我遇到了同样的问题，根据文档，由于react和react dom的版本不匹配，出现了错误。在我的情况下，升级react dom是有效的。

https://reactjs.org/warnings/invalid-hook-call-warning.html