使用 Axios 发布数据时出错 - MERN 堆栈

Question

我正在尝试测试模型的验证，特别是 name 变量是否具有特定长度。我在 http://localhost:3000/ 有一个前端设置 React + axios 和一个后端设置 express + node.

我在前端的 package,json 文件中设置了一个代理以包含 "proxy": "http://localhost:3001" 并确保我的后端包含已启用的 CORS 策略：

const app = express()
const cors = require('cors')
app.use(cors())

然而，当我 post 数据时，虽然验证输出确实显示在后端控制台中，但前端显示为空白屏幕并且错误显示在前端控制台中。我的目标是让错误信息出现在前端。

前端错误：

后端输出（精细）：

这是我在前端调用 axios 的函数。在调用 personService 对象时在最后一个 catch 块中捕获的实际创建新用户时应该会发生错误：

     const personObj = {
      name: newName,
      number: newPhone
    }

    //Updating database and states
    phoneService
      .create(personObj)
      .then(person => {
        setPersons(persons.concat(person))

        //Filter
        setNewPhone("")
        setNewName("")
      }).catch(error => {

        setMessage(
          error.response.data
        )
        setMessageType("phone-error-add")
        console.log(error.response.data)
        return
      })

    setMessage(
      `Added ${personObj.name}`
    )
    setMessageType("phone-added")

    setTimeout(() => {
      setMessage(null)
    }, 2000)

  }

这是 Axios PhoneService 文件：

import axios from 'axios'
const baseUrl = '/api/persons'

const getAll = () => {
  const request =  axios.get(baseUrl)
  return request.then(response => response.data)
}

const create = newObject => {
  
    const request = axios.post(baseUrl, newObject)
    return request.then(response => response.data)
}

const update = (id, newObject) => {
    const request = axios.put(`${baseUrl}/${id}`, newObject)
    return request.then(response => response.data)
}

const deleteData = id => {
    const request = axios.delete(`${baseUrl}/${id}`)
    return request
}


export default { 
  getAll, 
  create, 
  update,
  deleteData
}

这是在后端调用的post函数

app.post('/api/persons', (request, response, next) => {

    const body = request.body

    if (!body.name || !body.number) {
        return response.status(400).json({ error: 'Name or phone number is missing' })
    }

    const person = new Person({
        name: body.name,
        number: body.number,
    })

    person.save().then(savedPerson => {
        response.json(savedPerson)
    })
    .catch(error => next(error))
    // console.log(process.stdout)
})

这是后端的错误处理中间件，它输出第二张图片中的错误：

const errorHandler = (error, request, response, next) => {
    console.error(error.message)

    if (error.name === 'CastError') {
        return response.status(400).send({ error: 'malformatted id' })
    } else if (error.name === "ValidationError") {
        return response.status(400).json({ error: error.message })
    }

    next(error)
}

// this has to be the last loaded middleware.
app.use(errorHandler)

Answer 1

您不能在 React 中渲染对象。假设服务器的响应类似于

res = {error: "error message"}

不允许只对渲染做出反应

<div>{res}</div>

你必须渲染

<div>{res.error}</div>

使用 Axios 发布数据时出错 - MERN 堆栈

Error when Posting Data with Axios - MERN Stack

javascript

node.js

express

reactjs

axios