useState() 没有在 useEffect() 钩子内部更新

Question

我在更新 useEffect() 中的 useState() 时遇到问题。我想我可能会陷入无限循环，并且无论我传入的布尔值如何，useState 都不会更新。它总是显示为 false。

export const useAlert = () => {
  const action = useSelector(state => state.edit.action);

  const dispatch = useDispatch();

  const booleanA = true;

  const booleanB = false;

  const [isOverMax, setIsOverMax] = useState(false);
  const reset = () => {
    dispatch(resetEditAction());
  };

  useEffect(() => {
    setIsOverMax(booleanA || booleanB);
  }, isOverMax);

  return [isOverMax, reset];
};

关于更多上下文，booleanA 和 booleanB 是使用其他代码动态生成的，但即使它们像上面那样被硬编码，isOverMax 也只有false。即使两个布尔值都被硬编码为真，我也永远无法获得真值。

Answer 1

状态isOverMax 派生自booleanA 和booleanB。因此，isOverMax 应该在 booleanA 或 booleanB 更改时更改。您应该在依赖项数组中反映这一点。

 useEffect(() => {
   setIsOverMax(booleanA || booleanB);
 }, [booleanA, booleanB]);

这是一个工作示例。只需点击“显示代码 sn-p”，然后点击“运行代码片段”

const useAlert = () => {
  const [booleanA, setA] = React.useState(true);
  const [booleanB, setB] = React.useState(false);
  const [isOverMax, setIsOverMax] =React. useState(false);

  const reset = () => {
    setA(false);
    setB(false);
  };

  React.useEffect(() => {
    setIsOverMax(booleanA || booleanB);
  }, [booleanA , booleanB]);

  // just for testing
  const toggleA = () => {
    setA((a) => !a);
  }

   return [isOverMax, reset, toggleA];
};

const App = () => {
  const [alert, reset, toggleA]  = useAlert();
  return <div>
    isOverMax={"" + alert}<br/>
    <button onClick={() => toggleA()} >Toggle A</button>
    <button onClick={() => reset()} >Reset </button>
  </div>;
};

ReactDOM.render(<App />, document.getElementById("root"));

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

由于booleanA 和booleanB 状态已经存在，当其中一个状态发生变化时，它们将触发重新渲染。因此你可以只返回isOverMax的计算结果

const useAlert = () => {

   // ...
   return [booleanA || booleanB, reset];
}

    const useAlert = () => {
      const [booleanA, setA] = React.useState(true);
      const [booleanB, setB] = React.useState(false);
      const isOverMax = booleanA || booleanB;

      const reset = () => {
        setA(false);
        setB(false);
      };

      // just for testing
      const toggleA = () => {
        setA((a) => !a);
      }

       return [isOverMax, reset, toggleA];
    };

    const App = () => {
      const [alert, reset, toggleA]  = useAlert();
      return <div>
        isOverMax={"" + alert}<br/>
        <button onClick={() => toggleA()} >Toggle A</button>
        <button onClick={() => reset()} >Reset </button>
      </div>;
    };

    ReactDOM.render(<App />, document.getElementById("root"));

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

编辑

对于何时不使用效果挂钩，是否有任何一般准则，这样我就不会开始将它扔到不重要的代码中？

不是真的，但你应该读过Rules of Hooks。规则告诉你应该做什么来防止不可预知的行为。可悲的是，他们没有解释该规则的原因，这个问题是解释这一切的错误地方。因此，如果您还有问题，请打开另一个问题。

Answer 2

删除useEffect的依赖项中的isOverMax以避免无限循环

useEffect(() => {
  setIsOverMax(booleanA || booleanB);
}, []);