如何在PUT请求中实现条件式部分字段更新且避免代码冗余？

你可以通过提取公共请求逻辑和动态构建请求体的方式简化代码，消除重复的fetch和try/catch块：

function Block() {
  async function handleDismissButton() {
    try {
      // 构建基础请求体，包含必传的showAward字段
      const requestBody = { showAward: true };
      // 根据条件动态添加points字段
      if (conditionMet) {
        requestBody.points = points + 1; // 若需要同步更新本地points变量，可写成points += 1
      }

      const response = await fetch(`/api/user/${userId}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(requestBody) // 注意：fetch的body需要传入JSON字符串，原代码遗漏了转换
      });

      // 校验响应状态，避免解析错误响应
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }

      const users = await response.json();
      return users;
    } catch (err) {
      console.error('更新用户信息出错:', err);
      return null;
    }
  }

  return (
    <button
      role="button"
      onClick={handleDismissButton} // 简化事件绑定，无需额外箭头函数包裹
    >
      Click here
    </button>
  );
}

核心优化说明： #

• 复用请求逻辑：将重复的请求配置、异常捕获逻辑合并，只保留一份实现
• 动态构建请求体：先创建包含固定字段的基础对象，再根据条件补充可选字段，无需编写两份几乎一样的请求体
• 修复潜在问题：补上JSON.stringify()转换，符合fetch对请求体格式的要求
• 增强健壮性：添加响应状态校验，确保只有成功的响应才会被解析

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