React应用中多个下拉选择框无法按需更新数据库该如何解决

• 三个状态初始值为空字符串，未修改的下拉框对应状态始终为空，提交时会将空值一同传递给后端，后端校验字段合法性时会直接拒绝空值参数，导致更新失败
• 原代码提交的请求体固定携带3个状态字段，无论对应字段是否被修改，空值参数会直接触发后端校验失败

1. 调整提交请求体构造逻辑，仅将用户实际修改过的非空字段加入请求参数，同时增加空修改拦截，避免无修改的无效提交
2. 为表单内的提交按钮指定type="button"，避免触发浏览器默认表单提交行为导致页面刷新

核心代码修改 #

提交处理函数修改 #

const updateOrderHandler = (orderId) => {
    alert("Update handler working and passing data");
    // 仅收集非空的修改字段
    const adminOrderUpdate = {}
    if (pStatus) adminOrderUpdate['paymentInfo.paymentStatus'] = pStatus
    if (oStatus) adminOrderUpdate['orderStatus'] = oStatus
    if (dStatus) adminOrderUpdate['deliveryInfo.deliveryStatus'] = dStatus

    // 拦截无修改的提交请求
    if (Object.keys(adminOrderUpdate).length === 0) {
        alert('请至少修改一个状态后再提交')
        return
    }
    dispatch(adminUpdateOrder(orderId, adminOrderUpdate))
}

如果需要避免用户提交和原有状态完全相同的无效请求，可以进一步优化状态初始化逻辑：

// 初始值直接设置为订单原有状态
const [pStatus, setPStatus] = useState(paymentInfo?.paymentStatus || '');
const [oStatus, setOStatus] = useState(orderStatus || '');
const [dStatus, setDStatus] = useState(deliveryInfo?.deliveryStatus || '');

// 缓存初始值用于对比
const initialStatus = useMemo(() => ({
    p: paymentInfo?.paymentStatus || '',
    o: orderStatus || '',
    d: deliveryInfo?.deliveryStatus || '',
}), [paymentInfo, orderStatus, deliveryInfo])

const updateOrderHandler = (orderId) => {
    alert("Update handler working and passing data");
    const adminOrderUpdate = {}
    // 仅收集和初始值不同的修改字段
    if (pStatus && pStatus !== initialStatus.p) adminOrderUpdate['paymentInfo.paymentStatus'] = pStatus
    if (oStatus && oStatus !== initialStatus.o) adminOrderUpdate['orderStatus'] = oStatus
    if (dStatus && dStatus !== initialStatus.d) adminOrderUpdate['deliveryInfo.deliveryStatus'] = dStatus

    if (Object.keys(adminOrderUpdate).length === 0) {
        alert('请至少修改一个状态后再提交')
        return
    }
    dispatch(adminUpdateOrder(orderId, adminOrderUpdate))
}

提交按钮修改 #

<button 
  type="button"
  className="sbmtbutton" 
  style={{verticalAlign: 'middle'}} 
  onClick={() => updateOrderHandler(order._id)}
>
  <span>Update Status </span>
</button>

actions.js的逻辑无需修改，后端只要支持部分字段更新即可正常运行。

内容的提问来源于stack exchange，提问作者Paula De Silva