React/MUI按指定字段搜索组件改造问题求助

问题情况 #

现有一个React搜索组件，原本支持按username、fullname、email和organization字段进行搜索。现在需要添加下拉按钮让用户选择单一搜索字段，已通过useState定义value状态存储选中字段，但修改后的filterUser函数无法正常筛选数据。

原工作代码 #

const filterUser = (query, users) => {
  if (!query) {
    return users;
  } else {
    const filtered = users.filter((u) => {
      return (
        u.fullname.toLowerCase().startsWith(query.toLowerCase()) ||
        u.username.toLowerCase().startsWith(query.toLowerCase()) ||
        u.email.toLowerCase().startsWith(query.toLowerCase()) ||
        u.organization[0].toLowerCase().startsWith(query.toLowerCase())
      );
    });
    return filtered;
  }
};

修改后异常代码 #

const [value , setValue] = useState("username")
const filterUser = (query, users , value) => {
  if (!query) {
    return users;
  } else {
    const filtered = users.filter((u) => {
      return (
        u.value.toLowerCase().startsWith(query.toLowerCase()) ||
      );
    });
    return filtered;
  }
};

问题原因 #

1. 属性访问错误：u.value是尝试访问用户对象的value属性，而非value变量对应的字段名，需要用方括号语法u[value]动态访问。
2. 参数覆盖state：filterUser函数参数中的value会覆盖组件state中的value，导致无法正确获取选中的字段。
3. 特殊字段未处理：organization是数组类型，直接用u[value]会拿到数组而非字符串，需要单独处理。

修正后的代码 #

const [value, setValue] = useState("username");

const filterUser = (query, users) => {
  if (!query) {
    return users;
  }
  
  const lowerQuery = query.toLowerCase();
  return users.filter((u) => {
    // 根据选中字段获取对应值，处理organization的特殊情况
    let fieldValue;
    if (value === "organization") {
      fieldValue = u.organization?.[0] || "";
    } else {
      fieldValue = u[value] || "";
    }
    
    return fieldValue.toLowerCase().startsWith(lowerQuery);
  });
};

额外优化建议 #

• 可以给下拉选项添加友好的显示文本，避免直接使用字段名：

  <select value={value} onChange={(e) => setValue(e.target.value)}>
    <option value="username">用户名</option>
    <option value="fullname">全名</option>
    <option value="email">邮箱</option>
    <option value="organization">组织</option>
  </select>
  

• 增加字段合法性校验，防止选中不存在的字段导致报错：

  const validFields = ["username", "fullname", "email", "organization"];
  if (!validFields.includes(value)) return users;
  

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