重置搜索表单时如何移除空键以避免无效查询参数？

你的核心问题很明确：重置表单时只是把formValues里的值设为空字符串，但对应的键依然保留，导致提交时生成的查询字符串混入了空的filter参数（比如filter=IDXT002|）。下面给你两种实用的解决方案：

方案一：重置时直接清空formValues对象 #

目前你的clear方法是复制原对象后把值置空，这会保留所有键。我们可以直接把formValues设为空对象，从根源上移除所有空键：

clear = () => {
  this.setState({
    formValues: {}, // 直接清空对象，移除所有键
    contracts: [],
  })
}

为什么可行？ #

你的输入组件里已经通过this.props.formValues[label.DataField] || ""处理了值的显示逻辑——即使formValues里没有对应键，输入框也会显示为空字符串，完全不影响用户体验。这种方式最彻底，能避免formValues里出现任何冗余键。

方案二：提交时过滤空值的键 #

如果你不想修改重置逻辑，也可以在生成查询字符串的环节，只保留值不为空的键值对。修改你的handleFormSubmit方法：

handleFormSubmit = event => {
  event.preventDefault();
  const formData = this.state.formValues;
  
  // 过滤出值不为空的键值对，生成有效的filter参数
  const validFilters = Object.entries(formData)
    .filter(([key, value]) => value.trim() !== "") // 可选：trim()处理用户输入的空格
    .map(([key, value]) => `filter=${key}|${value}`);
  
  const query = validFilters.join('&');
  return this.loadContracts(query);
};

优点 #

这种方式更灵活，不管formValues里有没有空键，提交时都会自动过滤无效的空值。如果用户不小心输入了空格再提交，trim()也能帮你排除这种无效参数。

额外小提醒 #

注意你的表单组件里，重置按钮的onClick绑定了this.props.clear，同时表单的onReset绑定了this.props.handleFormReset。确保这两个方法指向同一个重置逻辑，避免出现重置行为不一致的情况——比如在父组件里把handleFormReset直接赋值为clear方法即可。

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