Question

你好，我正在尝试将数据发送到服务器，但是它不起作用并且返回undefined

这是我尝试过的

客户：

var Data = new FormData();
    Data.append('name', this.state.name);
    Data.append('time', this.state.time);
    Data.append('portion', this.state.portion);
    Data.append('method', this.state.method);
    Data.append('tags', JSON.stringify(this.state.tags));
    Data.append('ingredients', JSON.stringify(this.state.ingredients))
    Data.append('level', this.state.level)
console.log(Data)
axios.post('/api/post-recipe', Data)
 .then(res => res.data)
 .then(data =>{
      console.log(data.dish)
 })
 .catch(err => {
    if(err.response){
        if(err.response.data.redirect === true){
            window.location.replace(err.response.data.location)
        }
        if(err.response.data.message){
        alert(err.response.data.message)
        }
    }
 })

服务器：

  router.post('/', async (req, res) => {
    try {

        const {
             name,
             time,
             portion,
             ingredients,
             method,
             level,
             tags
                 } = req.body

console.log(name + time + portion + ingredients + method + level + tags)

} catch (error) {
 return res.status(500).send({
  message: error.message
   })
  }
})

，它在控制台中记录NaN，如果我在控制台中添加'name: ' name之类的单词，等等。它记录未定义的值，我已经从npm安装了表格数据，并且将其导入到我的代码中，我无法得到什么问题

Answer 1

您似乎正在将数据发布到/api/post-recipe/，但正在路线/上寻找它
您要记录日志以控制台变量的数学和的结果-分别记录它们或进一步阅读on MDN

Answer 2

您将数据发送到（/api/post-recipe）的路由与您处理数据的服务器（/）上的路由不匹配。您要么必须在客户端中将呼叫更改为axios，要么必须调整服务器上的路由定义以匹配/api/post-recipe。

此外，您尝试使用+连接各个字符串，但这不一定有效。试试

console.log(name, time, ...);

代替，并为...输入其他变量。如果您还想知道变量的名称，而不只是变量的值，请将所有参数封装在一对花括号中的console.log上：

console.log({ name, time, ... });

这会将参数变成一个对象，并显示其名称。

NodeJS和ReactJS：FormData不起作用

2 个答案: