我是 React 的新手,我在后端 (Express) 上创建了一个 CRUD,我想将它绑定(bind)到 React 前端。我有一个允许添加用户的表单,我希望在成功添加用户时更新状态。我设法通过实现“document.createElement”并在 5 秒后刷新页面(使用 setTimeout)来启动并运行它。我在想如何在 POST 成功后使组件重新呈现(更新状态)。
这是我到目前为止所管理的:
class App extends Component {
constructor() {
super();
this.state = {
users: null
};
}
componentDidMount() {
axios
.get("http://localhost:3000/customer_all")
.then(res => {
console.log(res);
this.setState({ users: res.data });
})
.then(() => console.log(this.state.users.map(item => item.name)))
.catch(err => console.log(err));
}
submit(e) {
e.preventDefault();
var form = document.forms[0];
var data = {};
var para = document.createElement("p");
para.textContent = "Success";
var id = document.getElementById("message");
data.name = form.name.value;
data.email = form.email.value;
axios
.post("http://localhost:3000/customer", {
name: data.name,
email: data.email,
headers: {
"Content-Type": "application/json"
}
})
.then(response => {
id.appendChild(para);
setTimeout(() => window.location.reload(), 5000);
form.reset();
})
.catch(err => console.log(err));
}
render() {
return (
<div>
<div id="message" />
<form method="POST" onSubmit={this.submit}>
<label htmlFor="name">Nume </label>
<input type="text" name="name" /> <br />
<br />
<label htmlFor="email">Email </label>
<input type="email" name="email" required />
<input type="submit" value="Adauga" />
</form>
<ol>
{!this.state.users
? "loading"
: this.state.users.map((item, i) => <li key={i}>{item.name}</li>)}
</ol>
</div>
);
}
}
提前感谢您的任何提示!
最佳答案
在提交方法中将新用户添加到数组中并设置状态。
submit = (e) => {
e.preventDefault();
var form = document.forms[0];
var data = {};
var para = document.createElement("p");
para.textContent = "Success";
var id = document.getElementById("message");
data.name = form.name.value;
data.email = form.email.value;
axios
.post("http://localhost:3000/customer", {
name: data.name,
email: data.email,
headers: {
"Content-Type": "application/json"
}
})
.then(response => {
const {users} = this.state;
users.push(response.data);
id.appendChild(para);
this.setState({users});
form.reset();
})
.catch(err => console.log(err));
关于javascript - axios POST 请求后更新状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52706008/