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>
  )
}

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钩子声明的状态不会更改？

1 个答案: