React组件中state的teamId执行setState后总是恢复默认值如何解决

问题原因 #

• 按钮未指定type属性：浏览器默认将表单内的按钮识别为submit类型，点击后会触发表单提交、页面重载，页面刷新后组件state会被重置为初始值，就会出现数值闪一下变1又回退到0的现象。
• render方法语法错误：你提供的代码中render方法没有返回JSX内容，会导致组件渲染异常，触发意外重挂载，state被重置。
• React Router版本不兼容的写法问题：如果你使用的是React Router v6及以上版本，现有Route的写法不符合规范，会导致路由匹配逻辑异常，触发组件反复重挂载，state被重置。

修复方案 #

1. 给按钮显式添加type="button"属性，或者在点击事件回调中阻止默认提交行为。
2. 补全render方法的return语句，正确返回要渲染的JSX内容。
3. 如果使用React Router v6，修正Route组件的写法，用element属性传入路由对应的内容。

修正后参考代码 #

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      teamId: 0,
      profile: ''
    }
    this.changeTeamProfile = this.changeTeamProfile.bind(this);
  }

  changeTeamProfile(e) {
    // 可选：阻止默认行为，避免表单提交刷新
    e.preventDefault();
    console.log('Changed')
    this.setState({teamId:1});
  }

  render() {
    // 补全return语句返回渲染内容
    return (
      <Router>
        <label>{this.state.teamId}</label>
        {/* React Router v5写法 */}
        <Route path="/setupnewuser">
          <div>
            {/* 显式指定type为button，避免默认提交行为 */}
            <button type="button" onClick={this.changeTeamProfile}> Save </button>
          </div>
        </Route>

        {/* 如果是React Router v6，换成下面的写法
        <Routes>
          <Route path="/setupnewuser" element={
            <div>
              <button type="button" onClick={this.changeTeamProfile}> Save </button>
            </div>
          } />
        </Routes>
        */}
      </Router>
    )
  }
}
export default App

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