Почему состояние, объявленное с помощью хука useState, не меняется?

Question

Метод switchSection должен изменить индекс текущего отображаемого раздела для отображения следующего раздела, индекс объявляется текущим состоянием, всякий раз, когда пользователь нажимает клавишу ввода, выполняется метод switchSection, если текущий отображаемый раздел является последним из списка, следует установить setCurrent до нуля, в противном случае увеличивается на единицу. вроде бы все нормально, но 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>
  )
}

Цитата

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) никогда не звонят.