为什么通过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)

如果在一个渲染中发生多个设置状态，则CCD_ 3和CCD_。如果你知道这不会发生，你可以这么做。

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

话虽如此，我还是建议你这样做，这样你就不会接近上一次渲染的值：

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

但这可能不是你的错。我猜你的setCurrent(prevVal => prevVal + 1)永远不会接到电话。