功能组件在条件函数中设置 useState

Question

如果你在函数中设置 useState 变量，条件是“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呼叫不是挂机呼叫。您正在调用从钩子调用返回的方法。事实上 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"/>