javascript - React 自定义钩子(Hook)无限循环

Question

我尝试使用自定义 react Hook 创建一个方法，以便在许多组件中重用相同的状态逻辑，但我遇到了不变违规“防止无限循环”。

function useCounter(initial) {
  const [count, setCounter] = useState(initial);

  return {
    increase: setCounter(count + 1),
    decrease: setCounter(count - 1),
    count
  };
}

使用

import useCounter from "./useCounter";

function CompOne() {
  const { count, increase } = useCounter(0);

  return <div onClick={() => increase()}>Component {count}</div>;
}

演示 https://codesandbox.io/s/practical-hooks-440l1

Answer 1

尝试

  return {
    increase: () => setCounter(count + 1),
    decrease: () => setCounter(count - 1),
    ...
  };