Javascript 在Express中编写后端代码并连接到React时出现问题

我正在编写一个代码，用于在网站中创建一个组。我使用MongoDB作为我的数据库，但作为初学者，我很难理解他们提供的API。所以基本上，当我试图为我的网站创建一个组时，我在连接后端和前端时遇到了问题。这是创建组的后端代码

router.post('/create_group', (req, res) => {
    try {
        const newGroup = Group.create(req.body);

        res.status(201).json({
            data: {
                Groups:
                    newGroup
            }
        });
    } catch (err) {
        res.status(400).json({
            status: 'fail',
            message: err
        });
    }
  //res.json(database.groups[database.groups.length-1]);

如您所见，我想编写一个适合MongoDB的代码，它看起来像我注释掉的部分。我想返回刚刚保存的对象，以便在更改路线时在中显示该信息。前端代码如下所示：

 onSubmitCreate = () => {
        fetch('http://localhost:3000/groups/create_group', {
            method: 'post',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                name: this.state.name,
                description: this.state.description,
                members: 1,
                likes: 0
            })
        })
            .then(response => response.json())
            .then(group => {
                if (group) {
                    //this.props.loadUser(user);
                    console.log('this is what Im working on' + group.name);
                    this.props.onCreateGroup(group);


                }
            });
    }

在前端，当我请求将信息发布到数据库时，我希望阅读响应并处理该信息。但是当我将console.log作为组变量时，我只得到一个空对象作为响应，我不知道如何让它返回用户输入的信息。如果你想看看onCreateGroup功能是什么样子的，就在这里

    const onCreateGroup = (group) => {
        setGroupInfo({
            name: group.name,
            description: group.description,
            likes: 0,
            members: 1
        });
        setRoute('group_page');
    }

请帮帮我！提前谢谢你

编辑：我被要求在导入express的地方发布js文件，所以我把它发布在这里

const createError = require('http-errors');
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const cors = require('cors');
const bodyParser = require('body-parser');
const logger = require('morgan');
const mongoose = require('mongoose');
mongoose.connect("mongodb+srv://teamboogle:wMKsYJNhTfL89k9@cluster0.nhcrc.mongodb.net/TalkWithMe?retryWrites=true&w=majority", { useNewUrlParser: true });

const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');
const profileRouter = require('./routes/profile');
const postsRouter = require('./routes/posts');
const groupsRouter = require('./routes/groups');
const signinRouter = require('./routes/signin');
const registerRouter = require('./routes/signin');






var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use(cors());
app.use(bodyParser.json());

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/profile', profileRouter);
app.use('/posts', postsRouter);
app.use('/groups', groupsRouter);
app.use('/signin', signinRouter);
app.use('/register', registerRouter);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});


const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'))
db.once('open', function(){
  console.log('Connection Secured');
})

module.exports = app;

---

您没有在MongoDB中正确保存对象，还需要返回保存在

Group

collection中的对象

另外，由于您返回的是

data.Groups.group

，因此您还需要在响应中读取该值

请试试这个：

router.post('/create_group', async (req, res) => {
    try {
        const newGroup = new Group(req.body);
        let group = await newGroup.save()

        res.status(201).json({
            data: {
                Groups:
                    group//return the saved object
            }
        });
    } catch (err) {
        res.status(400).json({
            status: 'fail',
            message: err
        });
    }
}

在前端代码中

onSubmitCreate = () => {
    fetch(...)
        .then(response => response.json())
        .then(data => {
            // read data.Groups.group from response
            let group = data.Groups.group
            if (group) {
                //this.props.loadUser(user);
                console.log('this is what Im working on' + group.name);
                this.props.onCreateGroup(group);


            }
        });
}

---

能否将索引文件（导入express的文件）的内容添加到问题中？@HarshanaSerasinghe我已经包含了js文件。非常感谢。你好，对不起，我贴了很多不同的评论，因为我把代码弄错了，现在大部分都正常工作了。谢谢你的帮助！但是，我似乎无法访问前端上返回的数据。当我试图以这种方式访问信息时，它总是说它是未定义的。。。。T^T