ReactJS axios post: returns null when it comes/goes from/to backend

Question

我在这个问题上卡了 2 天。我正在从 frontend to the backend (and other GET requests too but the problem is only with POST). However, when my data goes to the backend it does not post anything to the rest api even though response is 200 OK. That's why when in response it should have given the posted data, it can't find it and gives null. This is my POST code in backend index.js:

发送 POST 请求

const { response, request } = require('express');
require('dotenv').config()
const express = require('express');
const morgan = require('morgan');
const Contact = require('./models/contact.cjs');
const cors = require('cors')
const app = express();
app.use(express.json())
app.use(express.static('build'))
app.use(cors())
morgan.token('body', req => {
    return JSON.stringify(req.body)
  })
app.use(morgan(':method :url :status :res[content-length] - :response-time ms :body'));

const generateId = () => {
    const randNum = Math.floor(Math.random() * 5000)
    return randNum;
}

app.post('/api/persons', (req, res) => {
    const body = req.body
    console.log(body)
    if (!body.name || !body.number) {
        return res.status(400).json({
            error: "missing data"
        })
    } else if (Contact.find({name: body.name})) {
        Contact.findOneAndUpdate({name: body.name}, {$set: {number: body.number}}, {new:true})
            .then(updatedContacts => 
                res.json(updatedContacts)
            )
            .catch(err => console.log(err))
    
    } else {
        const contact = Contact({
            id: generateId(),
            name: body.name,
            number: body.number,
            date: new Date()
        })
        contact.save()
            .then(savedContact => {
                console.log(savedContact)
                res.json(savedContact)
            })
            .catch(err => {
                console.log(err)
            })
    
    }
})

const PORT = process.env.PORT
app.listen(PORT, () => {
    console.log(`Server is working on ${PORT}`)
})

这就是我的前端向后端发送数据的方式：contacts.js:


const create = (newObject) => {
    const readyToPost = {
        method: 'post',
        url: `${baseUrl}`,
        data: newObject,
        headers: {'Content-Type': 'application/json'},
        json: true
      }
    const request = axios(readyToPost)
    return request.then(response => {
        console.log(response.data)
        return response.data
    })
    .catch(err => {
        console.log(err)
    })
}

this 是我的 React 应用程序的前端。

关于为什么我的数据变成 null 的任何想法？

如有任何帮助，我们将不胜感激！

Answer 1

由于代码的同步性质，条件 Contact.find({name: body.name}) 总是 returning Query 对象 true 因此即使没有这样的文档，else if 块也会被执行。进入else if块后，由于没有匹配，所以findOneAndUpdate()被returning null.
使用 findOne() 而不是 find()。 find() return 是一个 游标，它是空的但为真 而 findOne() return 是 第一个匹配的文档（如果匹配）否则它将 return null（如果不匹配）。

// index.js (Backend)

app.post("/api/persons", async (req, res) => {
    const body = req.body;
    if (!body.name || !body.number) {
      return res.status(400).json({
        error: "missing data",
      });
    }

    // Using findOne() instead of find(). Returns null if record not found.
    const existing = await Contact.findOne({ name: body.name });
    if (existing) {
      Contact.findOneAndUpdate(
        { name: body.name },
        { $set: { number: body.number } },
        { new: true }
      )
        .then((updatedContacts) => {
          console.log(updatedContacts);
          res.status(200).json(updatedContacts);
        })
        .catch((err) => console.log(err));
    } else {
      const contact = Contact({
        id: generateId(),
        name: body.name,
        number: body.number,
        date: new Date(),
      });
      contact
        .save()
        .then((savedContact) => {
          console.log(savedContact);
          res.status(201).json(savedContact);
        })
        .catch((err) => {
          console.log(err);
        });
    }
  });

ReactJS axios post: returns null when it comes/goes from/to backend

ReactJS axios post: returns null when it comes/goes from/to backend

rest

post

http-headers

reactjs