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

Question

我有一个手风琴项目，我试图只在项目第一次打开时触发方法 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.

为什么 re-rendering 疯了？

如果条件是 counter === 1，doSomething 如何触发两次？

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

我想了解 useState 发生了什么、我的逻辑以及关于如何调试 re-renders 的任何指示。

Answer 1

Why is it re-rendering like crazy?

我认为那是因为您正在更改渲染函数中的状态，以便触发 side-effect。

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]);

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

React - fire callback based on state and first onClick event only

javascript

setstate

dom-events

reactjs

react-hooks