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

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

1 голос
/ 03 августа 2020

Метод 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>
  )
}

Цитата

1 Ответ

0 голосов
/ 03 августа 2020

Полагаю, вы уже проверили, что 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) никогда не позвонят.

...