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呼叫不是挂机呼叫。您正在调用从挂钩调用返回的方法。 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"/>

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

1 个答案: