功能组件集使用条件函数中的状态

Question

如果你在函数中设置useState变量，像"if语句"这样的条件在哪里，可以吗？我读到你不应该在条件下使用 hook，但设置状态也是如此吗？示例将说明我的意思。如果我不能这样做，如果我有多个变量和 if 条件，我怎么能正确设置它。请帮助我谢谢

我知道这一点：https://reactjs.org/docs/hooks-rules.html#explanation 但我有一些疑问

import React, { useState} from "react";
const MoreInfo = () => {
const [more_info, setMore_info] = useState("test");
const handleExpand = (event) => {
if (icon_expand === 'expand_more') {
setMore_info("test2");  // is this ok in if?
}
}
return (
<IconButton onClick={handleExpand}>
);
};
export default MoreInfo;

Answer 1

钩子useState.并且规则仅适用于该调用(以及可能正在使用的任何其他钩子调用，以及自定义钩子，如useSomething(。

setState调用不是挂钩调用。您正在调用从挂钩调用返回的方法。Infact React 保证setState引用在渲染之间不会更改。

钩子的规则：

仅在顶层调用挂钩

仅从 React 函数调用钩子

以下文章可能会帮助你了解这些规则存在的原因。它给出了引擎盖下钩子的视觉解释。

https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e

function App() {

// THE useState CALL SHOULD BE ON TOP LEVEL
// CAN'T BE CALLED INSIDE ANY CONDITIONALS
const [myState,setMyState] = React.useState(0); 

// THE setState CALLS CAN BE ANYWHERE
function changeCounter(value) {
if (value === 'increment') {
setMyState((prevState) => prevState + 1);
}
else if (value === 'decrement') {
setMyState((prevState) => prevState - 1);
}
}

return(
<React.Fragment>
<div>Counter: {myState}</div>
<button onClick={() => changeCounter('increment')}>
+
</button>
<button onClick={() => changeCounter('decrement')}>
-
</button>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>