React表单过滤异常：无法返回API中精准匹配的特定数据

你当前的过滤逻辑用了逻辑或（||），只要条目匹配任意一个字段就会被返回，这就是为什么会拿到所有相同邮编的条目，而非仅同时匹配所有提交字段的结果。要实现精准匹配所有用户填写的字段，需要改成逻辑与（&&），同时兼容用户只填部分字段的场景。

以下是调整后的代码，支持1个、2个或全部3个字段的精准匹配：

const { firstName, lastName, postcode } = formData;

// 整理有效搜索条件：只保留用户实际填写的非空字段
const validSearchCriteria = {};
if (firstName?.trim()) {
  validSearchCriteria.firstName = firstName.trim().toLowerCase();
}
if (lastName?.trim()) {
  validSearchCriteria.lastName = lastName.trim().toLowerCase();
}
if (postcode?.trim()) {
  validSearchCriteria.postcode = postcode.trim().toLowerCase();
}

const criteriaKeys = Object.keys(validSearchCriteria);

// 过滤API数据：仅保留满足所有有效条件的条目
const filteredResults = Object.values(values).filter(item => {
  return criteriaKeys.every(key => {
    const itemValue = item[key];
    // 确保条目字段存在非空，且与搜索条件匹配
    return itemValue != null && itemValue.trim().toLowerCase() === validSearchCriteria[key];
  });
});

console.log(filteredResults);

• 筛选有效条件：先过滤掉formData中空值、仅含空格的字段，避免无效逻辑干扰结果
• 多条件同时匹配：用Array.every()方法确保API条目必须满足所有用户填写的搜索条件，而非任意一个
• 统一匹配规则：所有字符串转小写并去除前后空格，兼容大小写输入和多余空格的情况
• 空值处理：检查条目字段是否为null/undefined，避免运行时报错

比如你提供的示例表单数据，这段代码会只返回同时匹配firstName: Joe、lastName: Bloggs和postcode: SA11 3FJ的唯一条目；如果用户只填了邮编，就会返回所有邮编匹配的条目，完全符合需求。

内容的提问来源于stack exchange，提问作者i-am-niall