Question

在这里我是新来反应钩子的人，我有一个边栏，我想将selecetedIndex更新为为该列表项选择的索引，即，当我选择一个项目时，我想将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)}

我是新手，我不知道如何在hooks中执行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)}

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

1 个答案: