React前端向Node.js(Express)服务器提交密码失败：仅用户名发送成功

看起来你的问题大概率出在state字段名的拼写不一致上，先仔细看你贴的代码：

你在console.log里用的是this.state.signInPassword（注意这里的In是大写I），但在JSON.stringify里写的是password: this.state.signinPassword（这里的in是小写i）——这两个字段名不一样，React的state里如果没有正确初始化signinPassword，或者表单输入绑定的是signInPassword，那自然传过去的密码就是undefined，服务器就收不到了。

下面给你几个具体的排查和修复步骤：

• 第一步：统一state字段名的拼写
  先确保你的组件state初始化和所有引用的地方拼写完全一致，比如统一用signInName和signInPassword（大写I）：

  // 初始化state示例
  constructor(props) {
    super(props);
    this.state = {
      signInName: '',
      signInPassword: '' // 这里和后面的引用保持一致
    };
  }
  
  // 提交时的代码修正
  onSubmitSignIn = () => {
    console.log(this.state.signInPassword); // 拼写一致
    fetch('http://localhost:3000/signin', {
      method: 'post',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        name: this.state.signInName, // 统一大写I
        password: this.state.signInPassword // 这里也统一
      })
    })
    .then(response => response.json())
    .then(user => {
      // 后续逻辑
    })
    .catch(err => console.error('请求错误:', err));
  };
  

• 第二步：检查表单输入的绑定逻辑
  确保用户名和密码输入框的onChange事件正确更新对应的state字段，比如密码输入框应该这样写：

  <input
    type="password"
    value={this.state.signInPassword}
    onChange={(e) => this.setState({ signInPassword: e.target.value })}
    placeholder="密码"
  />
  

  这里要注意setState里的字段名必须和state初始化的完全一致，不能大小写混写。

• 第三步：验证Express后端的接收逻辑
  确保你的Express服务器已经正确配置了解析JSON的中间件，并且接收的字段和前端发送的匹配：

  // Express服务器代码示例
  const express = require('express');
  const app = express();
  
  // 必须配置这个中间件才能解析JSON格式的请求体
  app.use(express.json());
  
  app.post('/signin', (req, res) => {
    // 这里的req.body应该能拿到name和password
    const { name, password } = req.body;
    console.log('收到的用户名:', name);
    console.log('收到的密码:', password); // 检查这里是否有值
    // 后续验证逻辑
  });
  

如果做完上面的步骤还是有问题，可以在前端fetch之前先console.log(this.state)，看看整个state里的密码字段有没有正确赋值，也可以在浏览器的开发者工具里查看网络请求的Payload，确认发送的JSON数据里是否包含password字段。

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