在Express+React-Redux的CRUD应用中实现车牌号重复值拦截

我来分享几个实用的分层处理方案，既能确保MongoDB数据的唯一性，又能给用户及时友好的反馈，避免只依赖MongoDB索引抛错的生硬处理：

一、后端Express接口的双重校验（核心兜底） #

虽然MongoDB的唯一索引已经能阻止重复数据，但直接让它抛错会导致接口返回500错误，我们需要主动拦截+捕获索引错误，返回清晰的业务提示：

// 假设你的车辆添加路由文件
import Car from './models/Car';

router.post('/api/cars', async (req, res) => {
  try {
    // 第一步：主动查询是否存在重复车牌号，提前拦截
    const existingCar = await Car.findOne({ carNumber: req.body.carNumber });
    if (existingCar) {
      return res.status(409).json({ error: '该车牌号已存在，请更换后重试' });
    }

    // 第二步：无重复则创建新车辆
    const newCar = new Car(req.body);
    await newCar.save();
    res.status(201).json(newCar);
  } catch (err) {
    // 捕获并发场景下的MongoDB唯一索引冲突错误（防止多请求同时通过前置校验）
    if (err.code === 11000) {
      return res.status(409).json({ error: '该车牌号已存在，请更换后重试' });
    }
    // 处理其他未知错误
    res.status(500).json({ error: '服务器内部错误，请稍后重试' });
  }
});

为什么要做双重处理？因为高并发场景下，可能两个请求同时通过前置查询，这时MongoDB的唯一索引会触发冲突，捕获err.code === 11000就能覆盖这种边缘情况。

二、前端React-Redux的前置校验与即时反馈 #

前端提前校验可以减少无效请求，给用户更流畅的体验：

1. 在表单提交前做本地校验 #

// CarForm.jsx
import { useSelector, useDispatch } from 'react-redux';
import { addCar } from './carActions';
import { useState } from 'react';

const CarForm = () => {
  const [carNumber, setCarNumber] = useState('');
  const [carOwner, setCarOwner] = useState('');
  const { error, list: existingCars } = useSelector(state => state.cars);
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    // 前端前置校验：检查已加载的车辆列表中是否有重复车牌号
    const isDuplicate = existingCars.some(car => car.carNumber === carNumber);
    if (isDuplicate) {
      dispatch({ type: 'ADD_CAR_FAILURE', payload: '该车牌号已存在，请更换后重试' });
      return;
    }
    // 校验通过再发起请求
    dispatch(addCar({ carNumber, carOwner }));
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>车牌号：</label>
        <input 
          type="text" 
          value={carNumber} 
          onChange={(e) => {
            setCarNumber(e.target.value);
            // 输入时清除错误提示
            error && dispatch({ type: 'CLEAR_ERROR' });
          }}
        />
      </div>
      <div>
        <label>车主：</label>
        <input 
          type="text" 
          value={carOwner} 
          onChange={(e) => setCarOwner(e.target.value)}
        />
      </div>
      {error && <p style={{ color: 'red', margin: '8px 0' }}>{error}</p>}
      <button type="submit">添加车辆</button>
    </form>
  );
};

export default CarForm;

2. 优化action的错误处理 #

// carActions.js
export const addCar = (carData) => async (dispatch) => {
  dispatch({ type: 'ADD_CAR_REQUEST' });
  try {
    const response = await fetch('/api/cars', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(carData)
    });
    // 处理后端返回的业务错误
    if (!response.ok) {
      const errorInfo = await response.json();
      throw new Error(errorInfo.error);
    }
    const newCar = await response.json();
    dispatch({ type: 'ADD_CAR_SUCCESS', payload: newCar });
    dispatch({ type: 'CLEAR_ERROR' });
  } catch (err) {
    dispatch({ type: 'ADD_CAR_FAILURE', payload: err.message });
  }
};

三、Redux状态层统一管理错误状态 #

在reducer里添加错误状态的处理，让所有组件能方便获取和清除错误：

// carReducer.js
const initialState = {
  list: [],
  loading: false,
  error: null
};

const carReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_CAR_REQUEST':
      return { ...state, loading: true, error: null };
    case 'ADD_CAR_SUCCESS':
      return { ...state, loading: false, list: [...state.list, action.payload] };
    case 'ADD_CAR_FAILURE':
      return { ...state, loading: false, error: action.payload };
    case 'CLEAR_ERROR':
      return { ...state, error: null };
    // 其他CRUD动作的处理逻辑...
    default:
      return state;
  }
};

export default carReducer;

总结 #

这套方案是前端前置校验+后端主动查询+MongoDB索引兜底的三层拦截，既保证了用户体验，又彻底杜绝了重复数据的产生，同时通过Redux统一管理状态和错误，让代码更易维护。

内容的提问来源于stack exchange，提问作者o.O