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

【问题标题】：Why state declared via useState hook does not change?为什么通过 useState 钩子声明的状态不会改变？
【发布时间】：2020-11-23 01:05:43
【问题描述】：

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

块引用

【问题讨论】：

您的错误在这里。 setCurrent(prevVal => prevVal + 1) 将该逻辑抽象为一个常量，然后在您的三元组上再次传递它。

标签： reactjs react-hooks setstate use-state

【解决方案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) 永远不会被调用。

【讨论】：

是的，setCurrent(prevVal => { return prevVal