太多的重新渲染。 React 限制渲染次数以防止无限循环。 - 反应挂钩

Question

我是这里的 React 挂钩的新手，我有一个侧边栏，我想将 selecetedIndex 更新为索引 selected ListItem 即，当我 select 一个项目时，我想更新 selectedIdx 以索引以显示它 selected。我做错了什么。

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

我用这种方式第二次尝试但没有结果：

         <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 钩子。这两种方式都失败了，任何人都可以让我知道我哪里出错了。任何帮助表示赞赏。

更新：这里我不使用：

{()=>{handleDrawerToggle}}

还有下面的作品为什么会这样？你能告诉我们吗？

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

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

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

Answer 1

您代码中的问题是您没有将函数传递给 onClick，而是 handleSelectedIdx/setSelectedIdx 返回的值，并且由于您设置了状态 re-render 被触发导致函数执行再次在下一个渲染。 React 在内部阻止了这个循环并警告你。

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

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

甚至

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

太多的重新渲染。 React 限制渲染次数以防止无限循环。 - 反应挂钩

Too many re-renders. React limits the number of renders to prevent an infinite loop. - React Hooks

react-hooks