- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建将数据发送到我的数据库(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/
我已经在 kubernetes 中部署了一个 3 pod mongodb statefulset,并且我正在尝试使用新的 mongodb+srv 连接字符串 (mongodb 3.6) 连接到具有 S
我已经创建了 MongoDB Atlas 帐户,并尝试连接。但出现以下错误。 MongoDB 连接错误 MongoNetworkError: 首次连接时无法连接到服务器 [cluster0-shard
我正在使用 Node-WebKit 创建桌面应用程序。该应用程序基本上是创建文档(员工日常工作的详细信息),任何注册用户都可以对这些文档发表评论。我正在创建的文档将被分成几个部分。用户将对特定部分发表
我正在尝试使用官方网站上的安装程序在我的本地机器上安装 mongo DB。但是我不断收到这条消息,有人可以帮忙吗? 我试过提供的解决方案 here但没有帮助。 最佳答案 我建议执行以下操作: 按 Wi
我对 MongoDB 和 MongoDB Compass 非常陌生。 我的客户集合中有大约 1000 条记录。如何通过 MongoDB 指南针一次删除所有记录。 非常感谢, 最佳答案 您可以使用 Mo
当我尝试在我的 Ubuntu 机器中安装 mongodb 时,apt-get 会显示以下选项 mongodb mongodb-clients mongodb-dev mongodb-server 谁能
如何将 Robomongo(或任何其他 mongodb 客户端)连接到由本地 Meteor 应用程序创建的 mongodb 实例? 最佳答案 确保 Meteor 正在本地主机上运行。打开终端窗口并运行
我需要在 MongoDB 中生成一个简单的频率表。假设我在名为 books 的集合中有以下文档。 { "_id": 1, genre: [ "Fantasy", "Crime"
我如何在 mongos mapreduce 中指定一个条件,就像我们在 mongos group 函数中所做的那样。 我的数据是这样的 {lid:1000, age:23}, {lid:3000, a
我的 mongodb 数据库文档中有几个 ID。我需要通过脚本在这些 ID 上创建索引,这样我就不必一次又一次地运行 ensureIndex 命令。 db.getCollection("element
在我的数据库中,每个包含项目的文档中都有一个嵌套的元素数组,格式如下: elements:[ { "elem_id": 12, items: [ {"i_id": 1
我正在构建一个应用程序,其中用户可以位于不同的时区,并且我运行的查询对他们的时区很敏感。 我遇到的问题是 MongoDB 似乎在查询时忽略了时区! 这是日期字段“2019-09-29T23:52:13
我正在研究使用 mongodb 进行分片,我有以下结构: 1 个 Mongod 到我的 ConfigServer,在 ReplicaSet 中只有 1 个成员 2 个分片,每个分片在 ReplicaS
我正在尝试获取一个 mongoDB 对象,例如 Friend1 包含另一个 mongoDB 对象 Friend2,该对象又包含第一个对象 Friend1本质上使它成为一个循环对象引用。 要么这样,要么
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题? Update the question所以它是on-topic对于堆栈溢出。 9年前关闭。 Improve this que
Mongo 版本 5.0.2。 Ubuntu 20.0 我在本地主机中启用了 MongoDB 连接的安全性。 我正在尝试通过以下命令使用身份验证详细信息连接我的本地主机 MongoDBmongo ad
我即将将分片的 MongoDB 环境从 2.0.7 升级到 2.2.9,最终我想升级到 2.4.9,但显然我需要通过 2.2 来完成。 2.2 的发行说明声明配置服务器应该首先升级其二进制文件,然后是
目前,我无法在我的虚拟 Ubuntu 机器上远程连接 mongodb 服务器。我无法使用在我的 Windows PC 上运行的 Robomongo 客户端连接,该 PC 也运行 vm。 这是两台电脑的
我创建了一个免费的 mongodb 集群。我创建了一个用户,设置了与 mongodb compass 的连接,复制了连接字符串,然后打开了我的 mongodb compass。将复制的字符串粘贴到那里
我使用 java 代码创建了 mongo 数据库集合索引 dbCollection.createIndex("accountNumber"); 当我看到索引使用 db.accounts.getInde
我是一名优秀的程序员,十分优秀!