javascript - React - 仅基于状态和第一个 onClick 事件触发回调

Question

我有一个 Accordion 项目，我试图只触发方法 doSomething第一次打开该项目:

const AccordionItem = ({index, a, b, c}: Props) => {
  const [isOpen, setIsOpen] = useState(false);
  const [counter, setCounter] = useState(0);

  if (isOpen) {
    setCounter(counter + 1);
  }

  if (counter === 1) {
    doSomething();
  }

  return (
    <Accordion>
      <Title onClick={() => setIsOpen(!isOpen)}>
      ...
    </Accordion>
  );

}

当我点击标题时，doSomething触发两次，我得到一个错误:Uncaught Invariant Violation: Too many re-renders .

为什么它会疯狂地重新渲染？

如何doSomething如果条件为 counter === 1 则触发两次？

我尝试使用 useEffect触发事件一次，但这没有意义，因为它在 componentDidMount 上触发这不是由第一次点击触发的。

我想了解 useState 发生了什么、我的逻辑以及关于如何调试重新渲染的任何指示。

Answer 1

Why is it re-rendering like crazy?

我认为这是因为您正在更改渲染函数中的状态，从而触发了副作用。

I tried using useEffect to fire the event once but that didn't make sense as it fired on componentDidMount which wasn't triggered by the first click.

useEffect 也是 componentDidUpdate 事件

并且您可以在辅助函数“toggle”中处理该事件

function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [counter, setCounter] = useState(0);

  function toggle() {
    if (!isOpen) {
      setCounter(counter + 1);
    }
    setIsOpen(!isOpen);
  }

  useEffect(() => {
    if (counter === 1) {
      doSomething();
    }
  }, [counter]);

  return (
    <div className="App">
      <button onClick={() => toggle()}>Click here</button>
    </div>
  );
}

“[counter]”表示每当计数器变量发生变化时，回调函数就会被执行。

 useEffect(() => {
       if (counter === 1) {
         doSomething();
       }
    }, [counter]);