React.js+Node.js+MongoDB栈删除优惠码按钮无效如何修复

问题排查及修复方案 #

核心问题 #

以下两处传参缺失是导致删除失败的根本原因：

1. 删除按钮点击事件未传递当前行优惠码参数，后续流程无法获取要删除的目标标识
2. 后端请求封装函数未接收参数、也未将优惠码通过请求体传递给后端，导致后端接口拿到的req.body.promoCode为undefined，deleteOne无法匹配到对应数据，自然不会执行删除操作。且MongoDB删除操作匹配不到数据时不会返回报错，所以你看到请求返回201但实际没有数据被删除。

修复代码 #

1. 删除按钮渲染代码修改

调用删除方法时传入当前行的promoCode参数

<Column
  title="Actions"
  render={(text, promoCode) => (
    <span>
      <a
        onClick={(e) => this.handleEditPromoCode(promoCode)}
      >
        Edit
      </a>
      <Divider type="vertical" />
      <a
        onClick={(e) => {
          this.handleDeletePromoCode(promoCode);
        }}
      >
        Delete
      </a>
    </span>
  )}
/>

2. APP层后端请求封装代码修改

新增形参接收优惠码，新增data字段把优惠码传递给后端

export function deletePromoCode(promoCode) {
  return new Promise(async (resolve,reject) => {
    $.ajax({
      type: "POST",
      url: server + apiCallPromos + 'deletepromocode',
      contentType: 'application/json',
      dataType: 'json',
      crossDomain: true,
      // 新增行：把优惠码转为JSON格式放到请求体中
      data: JSON.stringify({ promoCode }),
      beforeSend: function(xhr) {
        xhr.setRequestHeader('Authorization', 'Bearer ' + sessionStorage.token);
      },
      success: async data => {
        resolve(data);
      },
      error: async(xhr) => {
        if (xhr.responseText) {
          reject( xhr.responseText );
        } else {
          reject("No Connection Found!");
        }
      }
    });
  });
}

可选优化（非必须，建议加上） #

修改API层代码，增加删除结果判断，避免出现请求成功但实际未删除的异常情况，同时把不符合语义的201状态码（201为创建成功标识）改为通用成功状态码200：

exports.deletePromoCode = function (req, res) {
  promoCodeModel.PromoCode.deleteOne({
    promoCode: req.body.promoCode
  }, function (err, result) {
    if(err) {
      console.log(err);
      return res.status(501).send(err);
    }
    // 匹配不到要删除的优惠码时返回错误提示
    if (result.deletedCount === 0) {
      return res.status(404).send({ msg: "未找到对应优惠码，删除失败" });
    }
    return res.status(200).send(result);
  });
};

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