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

【问题标题】：React - fire callback based on state and first onClick event onlyReact - 仅基于状态和第一个 onClick 事件触发回调
【发布时间】：2019-07-18 14:00:25
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript reactjs dom-events react-hooks setstate

【解决方案1】：

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

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

我尝试使用 useEffect 触发一次事件，但这没有意义，因为它触发了第一次单击未触发的 componentDidMount。

useEffect 也是 componentDidUpdate 事件

您可以在辅助功能“切换”中处理事件

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

【讨论】：

太棒了！感谢您解释@AlejandroOrtega :)