React应用Post请求传空对象问题求助（附前后端代码）

核心问题1：Fetch API 请求体参数错误 #

前端使用fetch发送POST请求时，错误地用data字段传递请求体内容，但Fetch API规范中，请求体必须通过body字段传递。这直接导致后端无法解析到任何数据，拿到空的request.body。

核心问题2：状态更新时机逻辑瑕疵 #

当前代码在!duplicate分支里先调用setName等清空表单状态，虽然React状态更新是异步的，当前函数内的name等变量还保留旧值，但这种逻辑顺序容易引发混淆，建议调整为先发送请求，再清空状态。

修改后的前端代码（关键部分） #

const handleSubmit = (e) => {
  e.preventDefault();
  
  if(!duplicate){
    // 先保存要提交的联系人数据
    const contactData = { name, phone, email };
    
    // 先调用props添加联系人到前端状态
    props.addContacts(name,phone,email);
    
    // 发送POST请求，修正为body字段传递请求体
    fetch('http://localhost:5000/api/contacts', {
      method: 'POST',
      mode: 'cors',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(contactData) // 这里把data改成body
    }).then(() => {
      console.log(contactData);
    }).catch(error => {
      console.error(error);
    });
    
    // 最后清空表单状态
    setName('');
    setPhone('');
    setEmail('');
  }
};

后端代码优化建议 #

当前后端用response.redirect处理POST请求响应，对于前端fetch请求来说，重定向体验并不友好，建议改为返回JSON格式的成功响应：

app.post('/api/contacts', (request, response, next) => {
    const { name, email, phone } = request.body;
    
    pool.query(
        'INSERT INTO contacts(name, phone, email) VALUES($1, $2, $3)',
        [name,phone,email],
        (err, res) => {
            if (err) return next(err);
            // 替换redirect为JSON响应
            response.status(201).json({ 
              message: '联系人添加成功',
              contact: { name, phone, email }
            });
        }
    );
});

内容的提问来源于stack exchange，提问作者Avishek Chakrabarty