React + Redux中请求返回400错误的排查与解决

核心问题排查与修复步骤 #

1. 缺失请求头导致服务器无法解析JSON体 #

你的POST请求未设置Content-Type: application/json头，服务器无法正确识别请求体格式，这是触发400错误的最常见原因。修改makeOrder中的fetch配置：

export const makeOrder = (ingredientsIds) => async (dispatch) => {
  dispatch({
    type: "SEND_ORDER_IS_LOADING",
  });

  try {
    const res = await fetch("https://norma.nomoreparties.space/api/orders", {
      method: "POST",
      headers: {
        'Content-Type': 'application/json', // 新增请求头
      },
      body: JSON.stringify({ ingredients: ingredientsIds }),
    });

    const result = await res.json();

    // 同时校验HTTP状态和业务返回状态
    if (!res.ok || !result.success) {
      dispatch({ type: "SEND_ORDER_FAILED" });
      console.error("请求错误详情:", result); // 打印错误信息用于排查
      return result;
    }

    dispatch({
      type: "SEND_ORDER_SUCCESS",
      payload: result,
    });
  } catch (err) {
    dispatch({ type: "SEND_ORDER_FAILED" });
    console.error("网络请求异常:", err);
    return null;
  }
};

2. 校验请求参数格式合法性 #

• 确认selectedIngredientsIds是非空数组，且每个元素为服务器认可的有效食材ID（字符串格式，符合后端定义的规则）
• 尽管按钮已通过disabled阻止空请求，仍需过滤数组内的无效值，避免传递异常参数：

export const makeOrder = (ingredientsIds) => async (dispatch) => {
  // 新增参数校验：过滤无效ID
  const validIds = ingredientsIds.filter(id => typeof id === 'string' && id.trim() !== '');
  if (validIds.length === 0) {
    dispatch({ type: "SEND_ORDER_FAILED" });
    return { success: false, message: "无效的食材ID" };
  }

  dispatch({ type: "SEND_ORDER_IS_LOADING" });
  // 后续请求使用过滤后的validIds
  const res = await fetch("https://norma.nomoreparties.space/api/orders", {
    method: "POST",
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ ingredients: validIds }),
  });
  // ... 剩余逻辑
};

3. 优化错误排查机制 #

原代码中catch(() => null)会吞掉所有网络异常，无法定位具体问题。改用try/catch并打印日志，能快速区分是网络问题、参数问题还是服务器返回的业务错误。

额外优化建议 #

在OrderDetails组件的错误状态下，展示具体错误信息，方便定位问题：

{status === "FAILED" ? (
  <p className="text text_type_main-default text_color_error">
    {data?.message || "Ошибка оформления заказа"}
  </p>
) : (
  // 成功状态内容
)}

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