为什么通过 useState 钩子声明的状态不会改变？

Question

方法 switchSection 应该改变当前显示部分的索引以显示下一个部分，索引被声明为当前状态，每当用户点击回车键 switchSection 方法执行，如果当前显示的部分是列表中的最新部分， setCurrent 应设置为零，否则递增 1。一切似乎都很好，但是 setCurrent 并没有修改当前状态

  export default () =>{
  const refs = []
  //Here is the state declaration
  const [current, setCurrent] = useState(0)
  useEffect(() => {
    window.addEventListener('keyup', switchSection)
    return _ => window.removeEventListener('keyup', switchSection)
  }, [])

  const switchSection = event => {
    if(event.keyCode === 13) {
      refs[current].current.classList.remove('activeTabLink')
      //the line below does not change the state, the current remains 0
      current < refs.length - 1 ? setCurrent(prevVal => prevVal + 1) :  setCurrent(0)
      refs[current].current.classList.add('activeTabLink')
    }
  } 

  const changeActiveElement = (event) => {
    let buttons = Array.from(document.getElementsByClassName('tabLinks'))
    buttons.forEach(button => button.classList.remove('activeTabLink'))
    event.target.classList.add('activeTabLink')
    setCurrent(parseInt(event.target.id))
  }

  return (
    <div style={SSS()}>
      <Chapter additionalStyle={{textAlign: 'left', marginLeft: '2%'}}>Chapter</Chapter>
      <div className="tab">
        {history.links.map((link, index) => {
          const newRef = useRef(null);
          refs.push(newRef);
          if (index === 0) return <button className="tabLinks activeTabLink" ref={newRef} id={index} onClick={changeActiveElement} key={index}>{link}</button>
          else return <button className="tabLinks" ref={newRef} id={index} onClick={changeActiveElement} key={index}>{link}</button>
        })}
      </div>
      <div className="aboutContent">
        
      </div>
    </div>
  )
}

Blockquote

Answer 1

我假设您已经检查过 current < refs.length 实际上正在评估 true？那将是我首先看的地方，但我没有足够的信息来检查它。检查的一个好方法是删除三元运算符，使用 if-else 并在调试器中输入 console.log 或运行并单步执行。

接下来，请记住以下行：

current < refs.length - 1 ? setCurrent(prevVal => prevVal + 1) :  setCurrent(0)

如果在一次渲染中出现多个设置状态，current 和 prevVal 的值可能不同。如果你知道这不会发生，你可以这样做。

current < refs.length - 1 ? setCurrent(current + 1) : setCurrent(0)

话虽这么说，我建议只这样做，这样您就不会关闭最后一个渲染的值：

 setCurrent(prevVal => {
   return prevVal < refs.length - 1 ? prevVal + 1 : 0;
 });

但这可能不是你的错误。我猜你的 setCurrent(prevVal => prevVal + 1) 永远不会被调用。

为什么通过 useState 钩子声明的状态不会改变？

Why state declared via useState hook does not change?

setstate

reactjs

react-hooks

use-state