我如何设置 onClick 状态

Question

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

我的应用程序功能

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

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

Answer 1

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

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

我如何设置 onClick 状态

How do i setState onClick

state

infinite-loop

reactjs