采用DRY原则实现动态过滤逻辑：如何动态指定字段？

问题出在你用了点语法访问对象属性，这种方式只能使用固定的属性名，无法动态传入变量。要实现动态指定字段，需要改用方括号语法来访问对象属性。

修改后的完整代码如下：

const [filteredData, setFilteredData] = useState("");
const [filterValue, setFilterValue] = useState("");

const handleFilter = (e, type, field) => {
  setFilterValue(e);
  if (type === 'text') {
    const filterLowerCase = e.toLowerCase().trim();
    // 把 d.field 改成 d[field]
    const result = props.searchResults.filter(d => 
      !filterLowerCase || d[field].toLowerCase().includes(filterLowerCase)
    );
    setFilteredData(result);
  }
}

关键说明 #

• 当你需要通过变量来访问对象的属性时，必须使用 对象[变量名] 的语法，而不是 对象.变量名。后者会把field当成一个固定的属性名去查找，而非你传入的变量值。
• 确保传入的field参数是字符串类型，且与数据对象中的属性名完全匹配（比如传入'task_name'而非task_name）。

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