我如何设置状态 onClick答案

【问题标题】：How do i setState onClick我如何设置状态 onClick
【发布时间】：2021-06-30 07:34:22
【问题描述】：

嗨，所以我得到了带有状态的 react 函数，我用它来知道在给定时间应该渲染哪个组件；这是我的主要应用程序功能（我只包括该功能而不是课程的其余部分，因为它不相关）

我的应用功能

function App(){
  const [menuState, setMenuState] = useState('journal');
  
  return(
    <>
      <button onClick={setMenuState('journal')}>JOUNRAL</button>
      <button onClick={setMenuState('stats')}>STATS</button>
      <MenuHandler menu={menuState}/>
    </>
  );
}

我的 MenuHandler 函数

function MenuHandler(props) {
  const menu = props.menu;
  if(menu==="journal")
    return (<Journal />);
  if(menu==="stats")
    return (<Stats />);
  return (<Journal />);
}

当我这样做时，我得到一个无限循环，我不知道为什么。

【问题讨论】：

标签： reactjs state infinite-loop

【解决方案1】：

问题是您在每次渲染时都调用setMenuState，因此是无限循环。您没有将其分配给 onClick 处理程序，请传递这样的箭头函数来解决它：

<button onClick={() => setMenuState('journal')}>JOUNRAL</button>
<button onClick={() => setMenuState('stats')}>STATS</button>

【讨论】：