gpt4 book ai didi

mongodb - React - 如何在将数据发布到数据库(mongodb)后重新渲染组件

转载 作者:行者123 更新时间:2023-12-03 14:13:11 25 4
gpt4 key购买 nike

我正在构建将数据发送到我的数据库(mongodb)的应用程序。在 ComponentDidMount 中,我从该数据库获取数据,将它们保存在 this.state 中并在前端显示它们。接下来,我想从前端表单向该数据库添加另一个数据。现在它工作正常,因为这个单个数据已添加到数据库中,但我必须刷新页面才能查看新添加的数据。

所以,我想知道如何在前端动态显示新添加到数据库的项目。

我的第一个想法是组件生命周期,或者可能是一些在提交表单后获取数据的函数,但这行不通。

有什么想法吗?

这是我的代码:

import React, { Component } from 'react';
import axios from 'axios';
import Users from './Users';

class Main extends Component {
constructor(props) {
super(props);

this.state = {
users: [],
group: '',
password: '',
firstName: '',
lastName: '',
dateOfBirth: '',
listOfUserGroups: ''
};

this.handleSubmit = this.handleSubmit.bind(this);
}

componentDidMount() {
axios.get('http://localhost:3001/users')
.then(res => {
const users = res.data;
this.setState({ users });
console.log(this.state.users);
})
}

handleGroupChange = e => {
this.setState({ group: e.target.value });
}

handlePasswordChange = e => {
this.setState({ password: e.target.value });
}

handleFirstNameChange = e => {
this.setState({ firstName: e.target.value });
}

handleLastNameChange = e => {
this.setState({ lastName: e.target.value });
}

handleDateOfBirthChange = e => {
this.setState({ dateOfBirth: e.target.value });
}

handleListOfUserGroupsChange = e => {
this.setState({ listOfUserGroups: e.target.value });
}

handleSubmit(e) {
e.preventDefault();

const newUser = {
group: this.state.group,
password: this.state.password,
firstName: this.state.firstName,
lastName: this.state.lastName,
dateOfBirth: this.state.dateOfBirth,
listOfUserGroups: this.state.listOfUserGroups
};

axios.post('http://localhost:3001/users', newUser)
.then(response => {
console.log('Saved');
console.log(response.data);
console.log(this.state.firstName);
});
}

render() {
return (
<div>

<div className='mainWrapper'>
<form className='formStyle' onSubmit={this.handleSubmit}>
<label>Group</label>
<input type="text" onChange={this.handleGroupChange} />

<label>Password</label>
<input type="text" onChange={this.handlePasswordChange} />

<label>First name</label>
<input type="text" onChange={this.handleFirstNameChange} />

<label>Last name</label>
<input type="text" onChange={this.handleLastNameChange} />

<label>Date of birth</label>
<input type="text" onChange={this.handleDateOfBirthChange} />

<label>List of user groups</label>
<input type="text" onChange={this.handleListOfUserGroupsChange} />

<button type="submit">Add</button>
</form>
</div>

<Users users={this.state.users} />

<div>
<ul>
<li>{this.state.group}</li>
<li>{this.state.password}</li>
<li>{this.state.firstName}</li>
<li>{this.state.lastName}</li>
<li>{this.state.dateOfBirth}</li>
<li>{this.state.listOfUserGroups}</li>
</ul>
</div>

</div>
);
}
}

export default Main;

最佳答案

只需推送到数组即可更新状态,它就会重新渲染。

 handleSubmit(e) {
e.preventDefault();

const newUser = {
group: this.state.group,
password: this.state.password,
firstName: this.state.firstName,
lastName: this.state.lastName,
dateOfBirth: this.state.dateOfBirth,
listOfUserGroups: this.state.listOfUserGroups
};

axios.post('http://localhost:3001/users', newUser)
.then(response => {
console.log('Saved');
this.setState(prevState=>({
users: [newUser, ...prevState.users]
}))
console.log(response.data);
console.log(this.state.firstName);
});
}

或者,如果有必要,您可以推送到 axios 调用之前的状态,并仅在调用失败时恢复回来。这称为Optimistic UI

注意:您可以处理多个输入更改,例如 this

关于mongodb - React - 如何在将数据发布到数据库(mongodb)后重新渲染组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50058827/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com