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

Question

这个问题在这里已经有了答案：

React - 防止表单提交（11 个回答）

停止表单提交的 JavaScript 代码（12 个回答）

2年前关闭。

我有一个简单的 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;

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

Answer 1

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