React中如何仅当变量为true时才发送matches字段到服务端

核心逻辑很简单：不要直接把原始state的formData整个序列化发请求，在提交环节单独构造请求参数，根据布尔变量的值决定是否携带matches字段即可，全程不要修改原始state里的数据。

具体实现步骤 #

• 先明确你用来判断是否要发送matches的布尔变量（下面示例里用shouldSendMatches代指，替换成你项目里实际的变量即可，不管是其他state、计算属性、props值都可以）
• 在表单提交的处理函数里，拆分formData字段，按需拼接最终要提交的参数

推荐写法（兼容性最好） #

用对象解构把matches字段单独拆出来，剩下的字段作为基础提交对象，判断条件满足时再把matches加回去：

// 替换成你实际的判断逻辑，比如某个开关state、用户权限判断结果都可以
const shouldSendMatches = true;

const handleSubmit = async (e) => {
  e.preventDefault();
  // 从state数据里拆出matches字段，其余字段统一存在restFormData中
  const { matches, ...restFormData } = formData;

  // 拼接最终提交给服务端的参数
  const submitData = shouldSendMatches 
    ? { ...restFormData, matches } 
    : restFormData;

  // 发请求时用拼接好的submitData即可，示例：
  await fetch('/your/submit/api', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(submitData)
  })

  // 后续响应处理逻辑...
}

简洁写法（适合序列化自动忽略undefined的场景） #

如果你的请求库、或者JSON.stringify序列化时会自动过滤值为undefined的字段，可以用更短的写法：

const submitData = {
  ...formData,
  ...(shouldSendMatches ? {} : { matches: undefined })
}

注意：如果你的请求库不会自动忽略undefined字段，不要用这个写法，否则还是会把matches: undefined传给后端，优先用第一种解构的写法。

注意事项 #

• 不要为了不发matches直接删除原始state里的matches字段，会影响页面上其他依赖这个字段的逻辑，所有字段裁剪都在构造提交参数的环节做
• 如果后端要求不满足条件时matches要传固定值（比如空数组而不是缺省），直接调整三元表达式的返回值即可，比如不满足条件时返回{ matches: [] }

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