表单提交后的状态更改在 React 中立即恢复 [重复]答案

【问题标题】：State change after form submit gets reverted immediately in React [duplicate]表单提交后的状态更改在 React 中立即恢复 [重复]
【发布时间】：2019-02-10 06:59:29
【问题描述】：

我有一个简单的 React 应用程序，它列出了各州的用户。代码如下：

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  state = {
    users : [
      { name:'Ramu', age:23 },
      { name:'Somu', age:34 },
      { name:'Bheemu', age:45 }
    ]
  };

  addUser = (user, e) => {
    let users = Object.assign([], this.state.users);
    users.push(user)
    this.setState({
      users : users
    })
  }

  render() {
    return (
      <div className="App">
        <ul>
          { 
            this.state.users.map((user, index) => {
              return (<div>              
                { user.name } | {user.age}
                </div>)
            }) 
          }
        </ul>
        <form onSubmit={this.addUser.bind(this, { name:'Sita', age:21 })}>
          <label>
            Name:
            <input type="text"/>
          </label>
          <label>
            Age:
            <input type="text" />
          </label>
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

export default App;

在提交表单时，用户会被添加，但页面会立即重新加载，并且新用户会从状态中删除。为什么新用户会被删除？

【问题讨论】：

将e.preventDefault() 放入addUser 方法中。
成功了，谢谢！

标签： javascript reactjs forms state dom-events

【解决方案1】：

您需要阻止默认浏览器表单提交。在addUser 方法中添加e.preventDefault()。默认浏览器表单提交会重新加载该页面，因此新的 <App /> 组件会以其初始状态创建，而您会丢失新数据。

【讨论】：