Express服务端校验错误信息如何回传至Vanilla React客户端？

嘿，刚接触React和Express的话，这个需求其实挺常见的，我来一步步给你捋清楚怎么实现～

第一步：服务端（Express）返回结构化错误信息 #

首先在你的Express接口里，当校验失败时，别只返回状态码，要把错误信息以JSON格式返回，方便客户端精准解析。比如注册接口的示例代码：

// Express 路由示例
app.post('/api/register', (req, res) => {
  const { email, password } = req.body;
  const errors = {};

  // 模拟实际校验逻辑
  if (!email.includes('@')) {
    errors.email = '请输入有效的邮箱地址';
  }
  if (password.length < 6) {
    errors.password = '密码长度至少需要6位';
  }

  if (Object.keys(errors).length > 0) {
    // 返回400状态码（表示客户端请求错误）+ 错误对象
    return res.status(400).json({ errors });
  }

  // 校验通过后的逻辑：创建用户、存入数据库等
  res.status(200).json({ message: '注册成功' });
});

第二步：客户端（Vanilla React）处理请求并展示错误 #

在你的React组件里，需要用状态管理表单数据和错误信息，提交表单时发送请求，捕获服务端返回的错误并更新状态，最后渲染到页面对应位置。

完整组件示例（CDN版React适用）： #

<!-- 假设你的HTML文件已引入React和ReactDOM的CDN -->
<script type="text/babel">
  const RegisterForm = () => {
    // 管理表单输入数据
    const [formData, setFormData] = React.useState({
      email: '',
      password: ''
    });
    // 管理服务端返回的错误信息
    const [errors, setErrors] = React.useState({});

    const handleChange = (e) => {
      const { name, value } = e.target;
      setFormData(prev => ({ ...prev, [name]: value }));
      // 用户输入时清除对应字段的错误提示
      if (errors[name]) {
        setErrors(prev => ({ ...prev, [name]: '' }));
      }
    };

    const handleSubmit = async (e) => {
      e.preventDefault();
      try {
        const response = await fetch('/api/register', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(formData)
        });

        // fetch默认不会对4xx/5xx状态码抛错，需手动判断
        if (!response.ok) {
          const errorData = await response.json();
          // 更新错误状态，让页面渲染对应提示
          setErrors(errorData.errors);
          return;
        }

        // 注册成功后的逻辑：比如跳转登录页或提示成功
        alert('注册成功！');
        setFormData({ email: '', password: '' });
      } catch (err) {
        // 处理网络异常等非校验类错误
        setErrors({ general: '网络异常，请稍后重试' });
      }
    };

    return (
      <form onSubmit={handleSubmit} style={{ maxWidth: '300px', margin: '2rem auto' }}>
        <div style={{ marginBottom: '1rem' }}>
          <label style={{ display: 'block', marginBottom: '0.5rem' }}>邮箱：</label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            style={{ width: '100%', padding: '0.5rem' }}
          />
          {/* 显示邮箱字段的专属错误 */}
          {errors.email && <p style={{ color: 'red', margin: '0.25rem 0 0 0' }}>{errors.email}</p>}
        </div>
        <div style={{ marginBottom: '1rem' }}>
          <label style={{ display: 'block', marginBottom: '0.5rem' }}>密码：</label>
          <input
            type="password"
            name="password"
            value={formData.password}
            onChange={handleChange}
            style={{ width: '100%', padding: '0.5rem' }}
          />
          {/* 显示密码字段的专属错误 */}
          {errors.password && <p style={{ color: 'red', margin: '0.25rem 0 0 0' }}>{errors.password}</p>}
        </div>
        {/* 显示通用错误（比如网络问题） */}
        {errors.general && <p style={{ color: 'red', margin: '0 0 1rem 0' }}>{errors.general}</p>}
        <button type="submit" style={{ width: '100%', padding: '0.5rem', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '4px' }}>注册</button>
      </form>
    );
  };

  ReactDOM.render(<RegisterForm />, document.getElementById('root'));
</script>

几个关键要点 #

• 状态码规范：用4xx系列状态码（比如400）标识客户端请求错误，让客户端能清晰区分成功/失败响应。
• 错误结构化：按字段名对应错误信息，这样可以在每个输入框下方精准显示提示，提升用户体验。
• fetch的特殊处理：fetch不会自动对4xx/5xx状态码抛出错误，必须手动判断response.ok来处理失败场景。
• 输入时清除错误：用户修改输入内容时清除对应字段的错误，避免错误信息一直显示影响操作。

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