react-hooks - 太多的重新渲染。 React 限制了渲染的数量以防止无限循环。 - react 钩子(Hook)

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在钩子(Hook)里。它失败的两种方式都可以让我知道我错了。任何帮助表示赞赏。

更新:这里我不使用:

{()=>{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 返回的值并且由于您设置了一个状态，因此会触发重新渲染，从而导致该函数在下一次渲染时再次执行。 React 在内部阻止了这个循环并警告你。

解决方案是写你的 onclick 喜欢

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

甚至

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