时间戳

首页 > 解决方案 > 我如何设置状态 onClick

reactjs - 我如何设置状态 onClick

问题描述

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

我的应用功能

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 />);
}

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

标签： reactjsstateinfinite-loop

解决方案

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

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

推荐阅读