Question

我有一个手风琴物品，我正试图仅在第一次打开该方法时触发方法foreach($products as $Product){ echo $Product->showOrder(); }：

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上触发的，而触发并不是第一次点击触发的。

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

Answer 1

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

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

我尝试使用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]);

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

1 个答案: