React状态未按预期更新：点击NextButton后page值回退问题

核心原因是：你的NextButton处于表单（<form>）标签内部，点击按钮时浏览器会触发默认的表单提交行为，导致页面刷新，React组件重新初始化，page状态自然回到初始值0。

解决办法选其中一种即可：

1. 给按钮添加type="button"属性，明确告知浏览器这是普通按钮，不触发表单提交：

<NextButton type="button" onClick={handlePageIncrement}>Next</NextButton>

2. 在点击事件处理函数里阻止默认行为：

const handlePageIncrement = (e) => {
  e.preventDefault(); // 阻止表单提交的默认行为
  setPage((currPage) => currPage + 1)
}

3. 检查你的FormWrapperOuter或FormWrapperInner这两个styled组件，如果它们被设置为渲染<form>标签，但你实际不需要表单提交功能，可以把渲染标签改为<div>。

内容的提问来源于stack exchange，提问作者Christoper Chamberlain