表单提交POST请求时如何忽略空值对应的参数键

问题根因 #

HTML 表单默认会提交所有带有name属性且未被禁用的表单元素，就算值为空也会携带对应的键值对。你提前把newKey对应的 input 写在表单里，没赋值时它虽然是空值，但依然符合提交规则，所以会被带到请求体中。

可行解决方案 #

方案1：动态控制input的disabled属性（改动最小）

被设置disabled属性的表单元素不会被提交，仅需修改postData逻辑即可：

export const postData = (myRef, token, link, newValue) => {
  myRef.current.children[0].value = token;
  const newKeyInput = myRef.current.children[1];
  if (newValue) {
    newKeyInput.value = newValue;
    newKeyInput.disabled = false;
  } else {
    newKeyInput.disabled = true;
  }
  myRef.current.action = link;
  myRef.current.submit();
};

方案2：动态渲染可选input（React原生逻辑，易维护）

利用React的条件渲染，只有参数有值时才渲染对应的input，没有值就不渲染，自然不会提交空键：

// MyForm组件修改
const MyForm = ({
  myRef,
  newValue
}) => (
  <form id="MyForm" ref={myRef} method="POST">
    <input name="custom_token" type="hidden" />
    {/* 仅newValue存在时渲染对应input */}
    {newValue && <input name="newKey" type="hidden" value={newValue} />}
  </form>
);

// postData简化，不用再处理newValue赋值
export const postData = (myRef, token, link) => {
  myRef.current.children[0].value = token;
  myRef.current.action = link;
  myRef.current.submit();
};

方案3：提交前动态创建可选input

如果不想修改表单组件结构，可以在提交逻辑里判断参数，有值时才动态创建input插入表单：

export const postData = (myRef, token, link, newValue) => {
  myRef.current.children[0].value = token;
  // 先清除之前可能存在的同name input，避免重复提交
  const existInput = myRef.current.querySelector('input[name="newKey"]');
  if (existInput) existInput.remove();
  // 仅参数有值时创建并插入input
  if (newValue) {
    const input = document.createElement('input');
    input.name = 'newKey';
    input.type = 'hidden';
    input.value = newValue;
    myRef.current.appendChild(input);
  }
  myRef.current.action = link;
  myRef.current.submit();
};

该方案后续新增更多可选参数时，只需按相同逻辑添加创建代码即可，无需频繁修改表单JSX结构。

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