重新渲染过多。React限制了渲染次数以防止无限循环。-反钩

Question

我对React这里的钩子不熟悉，我有一个侧边栏，我想将其更新为selecetedIndex为此选择的索引，ListItem即，当我选择一个项目时，我想更新selectedIdx为索引以显示选定的索引。我做错了。

      <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并且由于您设置了状态，因此触发了重新渲染，导致该函数在下一次渲染时再次执行。内部反应可防止出现此循环并警告您。

解决的办法是像这样写onclick

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

甚至

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