太多的重新渲染.React 限制渲染次数以防止无限循环.- 反应钩子 [英] Too many re-renders. React limits the number of renders to prevent an infinite loop. - React Hooks

问题描述

我是 React 钩子的新手，我有一个侧边栏，我想将 selecetedIndex 更新为为该 ListItem 即，当我选择一个项目时，我想将 selectedIdx 更新为索引以显示它被选中.我做错了什么.

I'm new to React hooks here, I've a sidebar I want to update the selecetedIndex to the index selected for that ListItem i.e., when I select an item I want to update selectedIdx to index to show it selected. I'm doing something wrong.

      <ListItem button key={index}
                selected={selectedIdx===index} // to show selected need to update
                onclick={setSelectedIdx(index)}
              >
                  <ListItemIcon>{v.icon}</ListItemIcon>
                  <ListItemText primary={v.text} />
      </ListItem>


 let [selectedIdx,setSelectedIdx]=React.useState(0);

这样我第二次尝试但没有结果:

This way second try I did but not results:

         <ListItem button key={index}
                        selected={selectedIdx===index}
                        onclick={handleSelectedIdx(index)}
                      >
                          <ListItemIcon>{v.icon}</ListItemIcon>
                          <ListItemText primary={v.text} />
         </ListItem>

function handleSelectedIdx(i){
    setSelectedIdx(i)}

我是新手，不知道如何在钩子中执行 this.setState.它失败的两种方式都可以让我知道我是否出错了.任何帮助表示赞赏.

I'm new I don't know how do we do this.setState in hooks. Both the ways it failed can anyone please let me know were I'm going wrong. Any help appreciated.

更新:这里我不使用:

{()=>{handleDrawerToggle}}

以下仍然有效，为什么会这样?你能告诉我们吗?

Still the following works why is that so? Can you please let us know?

<IconButton
        color="inherit"
        aria-label="Open drawer"
        edge="start"
        onClick={handleDrawerToggle}
        className={classes.menuButton}
      />

   function handleDrawerToggle() {
      setMobileOpen(!mobileOpen);  }

  const [mobileOpen, setMobileOpen] = React.useState(false);

推荐答案

您代码中的问题是您没有将函数传递给 onClick，而是由 handleSelectedIdx/setSelectedIdx 返回的值，因为您设置了一个触发重新渲染的状态，导致该函数在下一次渲染时再次执行.React 内部会阻止此循环并警告您.

The problem in you code is that you are not passing a function to onClick, rather a value returned by handleSelectedIdx/setSelectedIdx and since you set a state a re-render is triggered causing the function to execute again on the next render. React internally prevents this loop and warns you.

解决方案是像这样写你的onclick

The solution is to write your onclick like

onClick={() => handleSelectedIdx(index)}

甚至

onClick={() => setSelectedIdx(index)}

这篇关于太多的重新渲染.React 限制渲染次数以防止无限循环.- 反应钩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！