小编Mev*_*tth的帖子

我正在构建将数据发送到我的数据库（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 });
    } …